小程序 - 组件通信 - 子传父@小四

2018-12-07  本文已影响0人  王云飞_小四_wyunfei

小程序 - 组件通信 - 子传父,代码如下:

// 第一步:通过自定义事件的方式通知父组件
// 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)
  }
})

https://github.com/xiaosi0707/wechat-miniProgram-demo/tree/master/child-parent

同学们听我说
上一篇 下一篇

猜你喜欢

热点阅读