小程序父子间通信

子页面配置

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 是旧数据
      }  
    }
  },
  methods: {
    onTapChild: function(event){
    // detail对象，提供给事件监听函数
    var myEventDetail = {
      id: event.currentTarget.dataset.id
    } 
    // 触发事件的选项
    var myEventOption = {bubbles: false} 
    // 使用 triggerEvent 方法触发自定义组件事件，指定事件名、detail对象和事件选项
    this.triggerEvent('parentEvent', myEventDetail, myEventOption)
    }
  }
})

this.triggerEvent()三个参数，依次是传给父级方法名、传参、触发事件方式
触发事件的方式有三种,默认均为false：
      bubbles 冒泡 
      capturePhase捕获 
      composed 为false事件将只能在引用组件的节点树上触发,不进入其他任何组件内部

参考 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

父页面配置

parent.json

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

parent.wxml

<view class='parent-wrap'>
  <view>dataFromParent是传递给子组件的数据,parentEvent是自定义组件可触发的事件名</view>
  <child dataFromParent='{{contents}}' bind:parentEvent='onParentEvent'/>
  //可以用bind:parentEvent或者bindparentEvent 
</view>

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);
  }
})