如何在微信小程序中使用事件总线进行组件通信？

创建事件总线（Event Bus）模块

• 目的：
  • 事件总线是一个独立的模块，用于管理事件的发布和订阅。它提供了一个集中的机制，使得组件之间可以通过发布和订阅事件来进行通信，而不需要依赖组件之间的父子关系或其他复杂的层级结构。
• 代码实现：
  • 创建一个名为event - bus.js的文件，在这个文件中定义事件总线的基本功能。以下是一个简单的事件总线示例：

  const eventBus = {
    callbacks: {},
    on(eventName, callback) {
      if (!this.callbacks[eventName]) {
        this.callbacks[eventName] = [];
      }
      this.callbacks[eventName].push(callback);
    },
    emit(eventName, data) {
      const callbacks = this.callbacks[eventName] || [];
      callbacks.forEach(callback => {
        callback(data);
      });
    }
  };
  export default eventBus;
  

  • 在这个事件总线中，callbacks是一个对象，用于存储不同事件名称对应的回调函数数组。on方法用于订阅事件，将回调函数添加到对应的事件数组中。emit方法用于发布事件，遍历相应事件的回调函数数组，并执行每个回调函数，同时传递数据。

在组件中使用事件总线进行通信

• 订阅事件（组件A）
  • 目的：
    • 组件A需要接收其他组件发布的事件消息，因此需要订阅相关事件。当事件被发布时，组件A中订阅的回调函数将会被执行，从而实现接收消息的功能。
  • 代码实现：
    • 首先，在组件A的.js文件中引入事件总线模块。假设组件A和event - bus.js文件在同一目录下，可以这样引入：

    const eventBus = require('../../event - bus.js');
    Component({
      attached() {
        eventBus.on('custom - event - name', this.handleEvent);
      },
      detached() {
        eventBus.off('custom - event - name', this.handleEvent);
      },
      methods: {
        handleEvent(data) {
          console.log('Received data:', data);
        }
      }
    });
    

    • 在attached生命周期方法中，组件A通过eventBus.on方法订阅了名为custom - event - name的事件，并指定handleEvent方法作为回调函数。当该事件被发布时，handleEvent方法将会被调用，接收并处理传递的数据。在detached生命周期方法中，使用eventBus.off方法取消订阅，这是一个良好的实践，可以避免内存泄漏等问题。
• 发布事件（组件B）
  • 目的：
    • 组件B需要向其他组件发送消息，通过在组件B中发布事件来实现。发布的事件会被已经订阅该事件的组件（如组件A）接收到。
  • 代码实现：
    • 同样在组件B的.js文件中引入事件总线模块：

    const eventBus = require('../../event - bus.js');
    Component({
      methods: {
        triggerEvent() {
          let data ='message from ComponentB';
          eventBus.emit('custom - event - name', data);
        }
      }
    });
    

    • 在triggerEvent方法中，组件B使用eventBus.emit方法发布了名为custom - event - name的事件，并传递了一个数据message from ComponentB。当这个事件被发布后，所有订阅了custom - event - name的组件（如组件A）将会收到这个数据，并执行相应的回调函数。