同级组件通信 · 手把手教你仿EventBus实现小程序兄弟组件传值

前端

2023-09-19 04:20:02

小程序组件间通信，苦恼不堪？

在小程序开发中，组件间通信是个绕不过的话题。随着业务的复杂度越来越高，组件间通信的场景也变得越来越多，尤其是兄弟组件之间的传值，更是让人头疼不已。

以往，小程序中兄弟组件通信通常有两种方式：

使用事件广播：兄弟组件分别向外抛出事件，父组件监听这些事件，再把数据传递给需要的数据；
使用全局变量：将数据存储在全局变量中，兄弟组件都可以访问该全局变量，从而实现数据共享；

这两种方式都有自己的局限性：

事件广播：需要手动编写事件监听器，代码量大且容易出错，而且这种方式存在父子组件通信的问题，兄弟组件直接通过事件通信可能会比较困难。
全局变量：容易造成命名冲突，且不方便维护，特别是当项目中组件较多时，全局变量会变得非常混乱。

仿照EventBus，轻松实现小程序兄弟组件传值

面对这些问题，我们可以借鉴前端框架中的EventBus思想，来实现小程序兄弟组件间的轻松传值。EventBus是一个中央事件总线，它允许组件之间通过事件进行通信，而不需要知道对方的存在。

在小程序中，我们可以使用一个全局变量来实现EventBus，该变量是一个对象，里面存储着各种事件及其对应的监听器。当某个组件想要发送事件时，它只需要调用EventBus的emit方法，将事件名和数据作为参数传递即可。而当某个组件想要监听事件时，它只需要调用EventBus的on方法，将事件名和监听器作为参数传递即可。

以下是一个仿EventBus的小程序代码示例：

// eventBus.js
const EventBus = {
  // 存储事件及其对应的监听器
  events: {},

  // 监听事件
  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  },

  // 移除监听器
  off(eventName, listener) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(l => l !== listener);
    }
  },

  // 触发事件
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(listener => listener(data));
    }
  },
};

// 使用示例
EventBus.on('myEvent', (data) => {
  console.log(data);
});

EventBus.emit('myEvent', {
  message: 'Hello, world!',
});