tencent cloud

<!-- When the custom component triggers the "myevent" event, the "onMyEvent" method is called -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- Alternatively, it can be written as -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent(e) {
    e.detail // Detail object provided when the custom component triggers an event.
  }
})

<!-- Within the custom component -->
<button bindtap="onTap">Clicking this button will trigger the "myevent" event</button>

Component({
  properties: {},
  methods: {
    onTap() {
      const myEventDetail = {} // Detail object, provided for the event listener function.
      const myEventOption = {} // Options for triggering the event.
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

// Page page.wxml
<another-component bindcustomevent="pageEventListener1">
  <my-component bindcustomevent="pageEventListener2"></my-component>
</another-component>

// Component another-component.wxml
<view bindcustomevent="anotherEventListener">
  <slot />
</view>

// Component custom-component.wxml
<view bindcustomevent="myEventListener">
  <slot />
</view>

// Component my-component.js
Component({
  methods: {
    onTap() {
      this.triggerEvent('customevent', {}) // Will only trigger pageEventListener2.
      this.triggerEvent('customevent', {}, {bubbles: true}) // Will sequentially trigger pageEventListener2 and pageEventListener1.
      this.triggerEvent('customevent', {}, {bubbles: true, composed: true}) // Will sequentially trigger pageEventListener2, anotherEventListener, and pageEventListener1.
    }
  }
})