小程序组件间通信

父传子

知识点：

父组件如果需要向子组件传递指定属性的数据，在 WXML 中需要使用数据绑定的方式

与普通的 WXML 模板类似，使用数据绑定，这样就可以向子组件的属性传递动态数据。

父组件如果需要向子组件传递数据，只需要两个步骤：

1.在父组件 WXML 中使用 数据绑定 的方式向子组件传递动态数据

2.子组件内部使用 properties 接收父组件传递的数据即可

知识点代码：

<!-- 引用组件的页面模板 -->
<view><costom prop-a="{{ name }}" prop-b="{{ age }}" />
</view>

在组件内部，需要在 Component 构造器中通过 properties 接收传递的数据，接收方式有两种：

Component({/*** 组件的属性列表 props*/properties: {propA: {type: String, // 传递的数据类型value: '' // 默认值},propB: Number // 简化的定义方式},// coding...
})

在子组件中也可以通过 this.setData() 对 properties 中的数据进行修改，但是一般不建议修改

// components/custom01/custom01.js
Component({/*** 组件的方法列表*/methods: {// 修改列表中的数据updateProp () {this.setData({propB: this.properties.propB + 1})}}
})

子传父

子组件如果需要向父组件传递数据，可以通过小程序提供的事件系统实现传递传递，可以传递任意数据。

事件系统是组件间通信的主要方式之一，自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件，流程如下：

1. 自定义组件触发事件时，需要使用 triggerEvent 方法发射一个自定义的事件
2. 自定义组件标签上通过 bind 方法监听发射的事件

触发事件：

<!-- 在自定义组件中 -->
<button type="primary" plain bindtap="sendData">传递数据</button>

// components/custom05/custom05.js
Component({// 组件的初始数据data: {num: 666},// 组件的方法列表methods: {// 将数据传递给父组件sendData () {// 如果需要将数据传递给父组件// 需要使用 triggerEvent 发射自定义事件// 第二个参数，是携带的参数this.triggerEvent('myevent', this.data.num)}}
})

监听事件：

<view>{{ num }}</view>
<!-- 需要在自定义组件标签上通过 bind 方法绑定自定义事件，同时绑定事件处理函数 -->
<custom05 bind:myevent="getData" />

Page({data: {num: ''},getData (event) {// 可以通过事件对象.detail 获取子组件传递给父组件的数据// console.log(event)this.setData({num: event.detail})}})

获取组件实例

如果前面两种方式不足以满足需要。

可在父组件里调用 this.selectComponent() ，获取子组件的实例对象，就可以直接拿到子组件的任意数据和方法。调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

<!-- 父组件 -->
<costom bind:myevent="getData" class="custom" />
<button bindtap="getChildComponent"></button>

// 父组件
Page({data: {},getChildComponent: function () {const child = this.selectComponent('.custom')console.log(child)}
})

兄弟通信

如果一个页面通过 wx.navigateTo 打开一个新页面，这两个页面间将建立一条数据通道

1. 在 wx.navigateTo 的 success 回调中通过 EventChannel 对象发射事件

2. 被打开的页面可以通过 this.getOpenerEventChannel() 方法获得一个 EventChannel 对象，进行监听、发射事件

3. wx.navigateTo 方法中可以定义 events 配置项接收被打开页面发射的事件

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

代码：

页面 .js 文件

Page({// 点击按钮触发的事件处理函数handler () {wx.navigateTo({url: '/pages/list/list',events: {// key：被打开页面通过 eventChannel 发射的事件// value：回调函数// 为事件添加一个监听器，获取到被打开页面传递给当前页面的数据currentevent: (res) => {console.log(res)}},success (res) {// console.log(res)// 通过 success 回调函数的形参，可以获取 eventChannel 对象// eventChannel 对象给提供了 emit 方法，可以发射事件，同时携带参数res.eventChannel.emit('myevent', { name: 'tom' })}})}})

被页面 .js 文件

Page({onLoad () {// 通过 this.getOpenerEventChannel() 可以获取 EventChannel 对象const EventChannel = this.getOpenerEventChannel()// 通过 EventChannel 提供的 on 方法监听页面发射的自定义事件EventChannel.on('myevent', (res) => {console.log(res)})// 通过 EventChannel 提供的 emit 方法也可以向上一级页面传递数据// 需要使用 emit 定义自定义事件，携带需要传递的数据EventChannel.emit('currentevent', { age: 10 })}})