前言
1.组件间通信
组件间的基本通信方式有以下几种。
WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过this.selectComponent方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
一、Component组件的通信与事件
1.监听事件
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者可以写成 --> <component-tag-name bind:myevent="onMyEvent" />
Page({ onMyEvent: function(e){ e.detail // 自定义组件触发事件时提供的detail对象 } }) 触发事件
2.触发事件
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
<!-- 在自定义组件中 --> <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
3.触发事件冒泡
// 页面 page.wxml <another-component bindcustomevent="pageEventListener1"> <my-component bindcustomevent="pageEventListener2"></my-component> </another-component>
// 组件 another-component.wxml <view bindcustomevent="anotherEventListener"> <slot /> </view>
// 组件 my-component.wxml <view bindcustomevent="myEventListener"> <slot /> </view>
// 组件 my-component.js Component({ methods: { onTap: function(){ this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2 this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1 this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1 } } })
4.获取组件实例
// 父组件 Page({ data: {}, getChildComponent: function () { const child = this.selectComponent('.my-component'); console.log(child) } })
5.自定义的组件实例获取结果
// 自定义组件 my-component 内部 Component({ behaviors: ['wx://component-export'], export() { return { myField: 'myValue' } } })
<!-- 使用自定义组件时 --> <my-component id="the-id" />
// 父组件调用 const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }
在上例中，父组件获取 id 为 the-id 的子组件实例的时候，得到的是对象 { myField: ‘myValue’ } 。
