自定义组件-触发事件

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

代码示例：

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap() {
      const myEventDetail = {} // detail对象，提供给事件监听函数
      const myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

触发事件的选项包括：

关于冒泡和捕获阶段的概念，请阅读 事件 章节中的相关说明。

代码示例：

// 页面 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() {
      this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2
      this.triggerEvent('customevent', {}, {bubbles: true}) // 会依次触发 pageEventListener2 、 pageEventListener1
      this.triggerEvent('customevent', {}, {bubbles: true, composed: true}) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
    }
  }
})