定义一个简单的EventBus

一、 在utils/eventBus.js中：

function EventBus() {
  this.event = {}
}
EventBus.prototype.on = function (eventName, callback) {
  this.event[eventName] = this.event[eventName] || []
  this.event[eventName].push(callback)
}
EventBus.prototype.emit = function (eventName, ...params) {
  if (this.event[eventName]?.length) {
    this.event[eventName].forEach((item) => item(...params))
  }
}
EventBus.prototype.off = function (eventName, callback) {
  if (callback && this.event[eventName]?.length) {
    this.event[eventName] = this.event[eventName].filter((item) => item !== callback)
  }
}
export default new EventBus()

1. 首先，定义了一个构造函数 EventBus。在构造函数中，创建了一个空对象 event，用来存储事件及其对应的回调函数。

function EventBus() { this.event = {} }

2. 接下来，通过 on 方法添加事件监听器。on 方法接受两个参数：eventName（事件名称）和 callback（回调函数）。它首先检查是否已经存在该事件的回调数组，如果不存在则创建一个空数组，然后将回调函数添加到该数组中。

EventBus.prototype.on = function (eventName, callback) {
  this.event[eventName] = this.event[eventName] || []
  this.event[eventName].push(callback)
}

3. 然后，通过 emit 方法触发事件。emit 方法接受一个事件名称 eventName 和可选的参数 params。它首先检查该事件的回调数组是否存在，如果存在，则遍历该数组并依次执行对应的回调函数，并将可选的参数传递给回调函数。

EventBus.prototype.emit = function (eventName, ...params) {
  if (this.event[eventName]?.length) {
    this.event[eventName].forEach((item) => item(...params))
  }
}

4. 最后，通过 off 方法移除事件监听器。off 方法接受两个参数：eventName（事件名称）和可选的 callback（指定要移除的特定回调函数）。如果指定了回调函数，则从事件的回调数组中过滤掉该回调函数。

EventBus.prototype.off = function (eventName, callback) {
  if (callback && this.event[eventName]?.length) {
    this.event[eventName] = this.event[eventName].filter((item) => item !== callback)
  }
}

5. 最后一行使用 export default 导出一个 EventBus 的实例，以便在其他文件中导入并共享该实例。

export default new EventBus()

注：

• vue3中使用引入 eventbus就可以使用。
  • 通过EventBus.emit('name', xxx) 发布事件。
  • EventBus.on('name', value => {}) 接收事件。