小程序的组件通信类似于Vue

👉https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

向下传递

properties传递

自定义事件triggerEvent

triggerEvent可用于向上通信

子组件中bind绑定事件，通过this.triggerEvent('myevent', myEventDetail, myEventOption)触发事件

在父组件中bind: myevent监听事件

具体可看官方文档 (opens new window)

// 组件 my-component.js
Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2
      this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
    }
  }
})

小程序中的事件对象也有一个名为 detail 的属性，它和 CustomEvent 中的 detail 属性类似。当一个小程序组件中触发了一个自定义事件时，detail 属性可以用来传递一些自定义的数据，供事件处理函数使用。

例如，假设我们在一个小程序页面中创建了一个自定义组件 <custom-component>，并在这个组件中触发了一个自定义事件 <my-event>：

<custom-component bindmyevent="onMyEvent" />

我们可以在页面的逻辑部分中实现一个名为 onMyEvent 的事件处理函数，并在这个处理函数中获取事件的 detail 属性：

Page({
  onMyEvent: function(e) {
    console.log(e.detail);
  }
})

此时，当用户在组件中触发了 <my-event> 自定义事件时，会执行 onMyEvent 函数，并输出事件对象 e 的 detail 属性。这个属性可以用来携带一些自定义数据，例如：

const myEventDetail = {
  message: "Hello, world!"
};

const myEventOption = {}; // 触发事件的选项

this.triggerEvent("myevent", myEventDetail, myEventOption);

在这个例子中，我们调用了 triggerEvent() 方法来触发 <my-event> 自定义事件，并将 myEventDetail 变量中存储的数据传递给事件的 detail 属性。在事件处理函数中，我们可以通过访问事件对象的 detail 属性来获取这些自定义数据。