微信小程序中如何监听自定义事件?
2023-03-17
微信小程序中,可以通过 this.triggerEvent()
方法触发自定义事件,并通过 this.bindCustomEvent()
方法在组件中监听自定义事件。
触发自定义事件
在组件中,可以通过 this.triggerEvent(eventName, detail, options)
方法触发自定义事件。其中,eventName
表示自定义事件的名称,detail
表示传递给监听器的参数,options
表示触发事件的选项。
示例 1:触发自定义事件
// 在组件中触发自定义事件
this.triggerEvent('myevent', { name: '张三', age: 18 }, { bubbles: true, composed: true });
在上面的示例中,我们通过 this.triggerEvent()
方法触发了一个名为 myevent
的自定义事件,并传递了一个包含 name
和 age
两个属性的对象作为参数,同时指定了 bubbles
和 composed
选项。其中,bubbles
表示事件是否冒泡,composed
表示事件是否可以穿越组件边界。
监听自定义事件
在组件中,可以通过 this.bindCustomEvent
方法监听自定义事件。其中,CustomEvent
表示自定义事件的名称。
示例 2:监听自定义事件
<!-- 在组件模板中绑定自定义事件 -->
<custom-component bind:myevent="onMyEvent" />
// 在组件定义中实现监听器函数
Component({
methods: {
onMyEvent(event) {
console.log(event.detail.name); // 输出 "张三"
console.log(event.detail.age); // 输出 18
}
}
})
在上面的示例中,我们在组件模板中通过 bind:myevent
绑定了一个名为 myevent
的自定义事件,并在组件定义中实现了相应的监听器函数 onMyEvent()
,通过 event.detail
获取传递的参数。
希望这篇文章对您有所帮助!如有任何问题或疑问,请随时与我联系。
大家都在看

2020-09-08

2020-09-09

2020-09-09

2020-09-08

2020-09-09