组件事件
事件系统是组件间交互的主要形式。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。关于事件的基本概念和用法。
监听自定义组件事件的方法与监听基础组件事件的方法完全一致:
代码示例:
<component-tag-name bindmyevent="onMyEvent" />
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent: function(e){
e.detail
}
})
自定义组件触发事件时,需要使用 triggerEvent
方法,指定事件名、detail对象和事件选项:
代码示例:
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = {}
var myEventOption = {}
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
触发事件的选项包括:
选项名 |
类型 |
是否必填 |
默认值 |
描述 |
bubbles |
Boolean |
否 |
false |
事件是否冒泡 |
composed |
Boolean |
否 |
false |
事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部 |
capturePhase |
Boolean |
否 |
false |
事件是否拥有捕获阶段 |
关于冒泡和捕获阶段的概念,请阅读 事件 章节中的相关说明。
代码示例:
// 页面 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>
Component({
methods: {
onTap: function(){
this.triggerEvent('customevent', {})
this.triggerEvent('customevent', {}, { bubbles: true })
this.triggerEvent('customevent', {}, { bubbles: true, composed: true })
}
}
})