Vue_中央事件总线EventBus传值&自定义MyEventBus

一、EventBus的创建以及使用

//1、在 src 的 main.js 中，加上以下代码 
  import Vue from 'vue'
  Vue.prototype.$EventBus = new Vue()

//2、发送消息，使用Vue原型链引入
this.$EventBus.$emit('getSumu', "sumu10086")  

//3、监听接收消息，使用Vue原型链引入
this.$EventBus.$on('getSumu', (data) => {
      console.log('data', data)
    })
  
//4、移除事件监听者(可在beforeDestroy这个生命周期函数时使用，避免EventBus容器中有很多个一模一样的事件监听器)
beforeDestroy(){
    //移除监听事件"getSumu"
    this.$EventBus.$off("getSumu")
  }

二、自定义EventBus

//1、创建一个中央时间总线类   
class MyEventBus {
  constructor() {
    this.callbacks = {};
  }

  $on(name, fn) {
    //添加参数验证，确保回调函数必须是一个函数。
    if (typeof fn !== 'function') {
      throw new Error('Callback must be a function');
    }

    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  
  //添加$once方法，用于注册一次性事件监听器。
  $once(name, fn) {
    const onceWrapper = (...args) => {
      fn(...args);
      this.$off(name, onceWrapper);
    };

    this.$on(name, onceWrapper);
  }

  $emit(name, ...args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => {
        try {
          setImmediate(() => cb(...args));//使用 setImmediate 更好地利用事件循环，提高性能，延迟执行回调函数，以支持异步操作。。
        } catch (error) {//捕获回调函数执行过程中的错误，并输出错误信息。
          console.error(`Error while executing callback for event '${name}':`, error);
        }
      });
    }
  }
  
  //添加$off方法，用于取消特定事件的监听器。
  $off(name, fn) {
    if (this.callbacks[name]) {
      const index = this.callbacks[name].indexOf(fn);
      if (index !== -1) {
        this.callbacks[name].splice(index, 1);
      }
    }
  }

  //添加 $clear 方法，用于清空所有事件监听器。
  $clear() {
    this.callbacks = {};
  }
}

//2、使用如下：

/*创建 MyEventBus 实例*/
  const MyEventBus= new MyEventBus();  

/*注册事件监听器*/
MyEventBus.$on('myEvent', (data) => {
  console.log('Event received:', data);
});

/*发布事件*/
MyEventBus.$emit('myEvent', 'Hello Sumu');

/*取消事件监听器*/
MyEventBus.$off('myEvent', callback);

/*注册一次性事件监听器*/
MyEventBus.$once('myEvent', (data) => {
  console.log('One-time event received:', data);
});

/*发布事件（会触发一次性事件监听器）*/
MyEventBus.$emit('myEvent', 'Hello again!');

/*清空所有事件监听器*/
MyEventBus.$clear();