小程序组件通信

2025-01-02

注意：平行页面之间的通信可以在跳转时，通过url传参的方式传递。

父传子

父组件wxml使用数据绑定向子组件传递数据。

子组件使用properties接收数据。

checkbox例子

父组件.js

data: {
	isChecked: false
}

父组件.wxml

<custom-checkbox checked="{{ isChecked }}" />

子组件(自定义组件）.wxml

<checkbox class="custom-checkbox" checked bindtap="updateChecked" />

子组件.js

properties{
    checked: {
      type: Boolean,
      value: false
    }

}

注意，以上的办法有缺陷。因为需要updateChecked会需要修改properties的值，但是properties的值一般不建议修改，会造成数据流混乱。

解决办法：在子组件内重新一个data叫做isChecked，通过observers数据监听把传过来的值赋给子组件的data即可。参考视频

子传父

自定义组件内部使用triggerEvent方法发射自定义事件，同时携带数据

自定义组件标签通过bind方法监听发射的事件，同时绑定事件处理函数，在事件处理函数中通过事件对象获取传递的数据。

示例

子组件.wxml

绑定事件函数

<button type="primary" plain bindtap="sendData">传递数据</button>

子组件.js

第二个参数是要传递的数据。

methods: {
	sendData(){
		this.triggerEvent('myevent', this.data.num)
	}
}

父组件.wxml

<custom05 bind:myevent="getData" />

父组件.js

通过getData函数获取数据。

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