子 - 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);
    // 其他操作...
  }
})