微信小程序组件通信

Posted 2021-02-09 墨染清浅

父子通信

在子组件的对应js中

properties：{

　　prop名字：数据类型，

　　prop名字：{

　　　　type：数据类型，

　　　　value：默认值

　　}

}

在父组件的wxml模板中找到子组件标签

<子组件 prop名字=‘值’></子组件>

 

2.子父通信

在子组件对应的元素身上绑定原生事件

<button bindtap = ‘tapHandler‘></button>

// 在函数中，触发自定义事件
tapHandler(){
    this.triggerEvent(‘自定义事件名‘,‘数据‘）
}

在父组件的wxml模板中找到子组件标签，在标签上监听自定义事件

<子组件 bind自定义事件名 = ‘函数’></子组件>
函数（e）{
     e。detail就是子组件发来的数据
}

关于组件可以参照微信小程序的官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/