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

 

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

 

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

子 - 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