微信小程序组件通信子传父

小程序 - 组件通信 - 子传父，代码如下：

// 第一步：通过自定义事件的方式通知父组件
// components/music/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name: String,
    type: String
  },
  methods: {
    onMusic () {
      /*
       *第一步：通过自定义事件的方式通知父组件
       triggerEvent 指定事件名、detail对象和事件选项 - 通知父组件
        parentReceive自定义事件名、name: '雪落下的声音'要传递过去的数据、事件选项有三个（见官网）
      */
      this.triggerEvent('parentReceive', {
        name: '会飞的小蚂蚱'
      }, {})
    }
  }
})

 

<!--第二步：事件绑定 -->
<!--components/music/index.wxml-->
<view>music:{我的名称:{{ name }},类型：{{ type }}}</view>
<button bind:tap="onMusic">通知父组件</button>

 

<!-- 
第三步：在组件标签上绑定在子组件中自定义的事件“parentReceive”，通过回调函数的形式在父组件中进行逻辑处理；
pages/index/index.wxml
-->
<f-music name="成都" type="2" bind:parentReceive="parentCallBack" />

 

// 第四步：在回调函数的事件对象中进行数据接收
// pages/index/index.js
Page({
  // 第四步：在回调函数的事件对象中进行数据接收
  parentCallBack (event) {
    console.log(event)
  }
})