小程序父子通信

1、子组件 Component

• child.json

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

• child.wxml

<view class='template-child'>
  <block >
    <button bindtap='onTapChild'>{{item.name}}</button>
  </blcok>
</view>

• child.js

Component({
  /**
   * 组件的属性列表
   */
 // 接收父组件传的数据
  properties: {     //跟vue的 props 差不多
     dataFromParent: {   // 属性名
      type: Array,// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: ' '  // 属性初始值（可选）, 默认的值
    }
  },

  /**
   * 组件的初始数据
   */
  data: { },

  /**
   * 组件的方法列表
   */
  methods: {
      //传递给父组件
     onTapChild: function(event){
      // 使用 triggerEvent 方法触发自定义组件事件，指定事件名、detail对象和事件选项 
     //triggerEvent 方法 跟vue的 $.emit()一样
     //parentEvent 自定义事件的名称，父组件中使用
      this.triggerEvent('parentEvent', {'要传的数据'})
    }
  }
})

2、父组件

2.1 父组件通过 dataFromParent ='{{contents}}' 传向子组件

• 父组件 - Page

{
  "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.jianshu.com/p/d15cde54768d