小程序 - 组件通信 - 子传父,代码如下:
// 第一步:通过自定义事件的方式通知父组件
// 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
网友评论