A是父組件，B是子組件

父傳子

<!-- 父組件A wxml --><view> <componentB paramAtoB='{{paramAtoB}}'></componentB></view>

//父組件Ajson （里面不能有注釋）

{ "navigationBarTitleText": "父子傳值", "usingComponents": {  "componentB": "../../components/son/son" }}

//父組件A js// view/father/father.jsPage({ /**  * 頁面的初始數據  */ data: {  paramAtoB: "我是A向B傳值" }})

<!-- 子組件B wxml --><view class="inner"> {{paramAtoB}}</view>

//子組件B jsComponent({ //B在這里接收與data類似可以直接在wxml上用 properties: {  paramAtoB: {   type: String,//類型   value: 'default value'//默認值  } }, data: {   }})

//子組件B json

{ "component": true, "usingComponents": {}}

效果

子傳父

<!-- 父組件A wxml --><view> <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB> {{ paramBtoA }}</view>

// view/father/father.jsPage({ /**  * 頁面的初始數據  */ data: {  paramAtoB: "我是A向B傳值",  paramBtoA: 1122 }, onMyEvent: function (e) {  //通過事件接收  this.setData({   paramBtoA: e.detail.paramBtoA  }) }})

//父組件A json （里面不能有注釋）

{ "navigationBarTitleText": "父子傳值", "usingComponents": {  "componentB": "../../components/son/son" }}

<!-- 子組件B wxml --><view class="inner"> {{paramAtoB}} <button bindtap='change'>向A中傳入參數</button></view>

（注意：子組件的方法需要寫在methods：{}里面）

//子組件B jsComponent({ //B在這里接收與data類似可以直接在wxml上用 properties: {  paramAtoB: {   type: String,//類型   value: 'default value'//默認值  } }, data: {   }, methods: {  //觸發change事件向A傳值  change: function () {   this.triggerEvent('myevent', { paramBtoA: "666傳值成功" });  } }})

//子組件B json

{ "component": true, "usingComponents": {}}

原先效果

點擊按鈕之后

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。