微信小程序中如何监听自定义事件?
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 的自定义事件,并传递了一个包含 nameage 两个属性的对象作为参数,同时指定了 bubblescomposed 选项。其中,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 获取传递的参数。


希望这篇文章对您有所帮助!如有任何问题或疑问,请随时与我联系。