小程序中父子組件間的通訊與事件

 

點此查看微信小程序官方文檔

 

如下示例，可自行體會..

子 - Component 

child.json

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

child.wxml

<view class='template-child'>
  <block wx:for='{{dataFromParent}}'>
    <button data-id='{{item.id}}' bindtap='onTapChild'>{{item.name}}</button>
  </blcok>
</view>

 

child.js

Component({ /** * 組件的屬性列表 */ properties: { dataFromParent: { type: Array, value: [], observer: function (newVal, oldVal, changedPath) { // 屬性被改變時執行的函數（可選），也能夠寫成在methods段中定義的方法名字符串
        // 一般 newVal 就是新設置的數據， oldVal 是舊數據
 } } }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { onTapChild: function(event){ // detail對象，提供給事件監聽函數
      var myEventDetail = { id: event.currentTarget.dataset.id } // 觸發事件的選項
      var myEventOption = {} // 使用 triggerEvent 方法觸發自定義組件事件，指定事件名、detail對象和事件選項
      this.triggerEvent('parentEvent', myEventDetail, myEventOption) } } })

父 - Page

parent.json

{ "usingComponents": { "child": "../component/child/child" } }

項目目錄結構：

parent.wxml

<view class='parent-wrap'>
  <view>這裏是父容器, dataFromParent是傳遞給子組件的數據， parentEvent是自定義組件可觸發的事件名</view>
  <child dataFromParent='{{contents}}' bind:parentEvent='onParentEvent'/>
</view>

能夠用 bind:parentEvent  也能夠 bindparentEvent 

 

parent.js

Page({ /** * 頁面的初始數據 */ data: { contents: [ { id: 1, name: '點擊第 1 個按鈕' }, { id: 2, name: '點擊第 2 個按鈕' } ] }, // 當自定義組件觸發 parentEvent 事件時，調用 onParentEvent 方法
  onParentEvent: function (event) { // 自定義組件觸發事件時提供的detail對象，用來獲取子組件傳遞來的數據
    var id = event.detail.tag; console.log('子組件傳遞來的數據 id:', id); // 其餘操做...
 } })

 

 

轉: https://www.cnblogs.com/yier0705/p/9679505.html