vue3-事件总线

事件总线的概念：

事件总线（Event Bus）可以理解为一个全局的发布/订阅模式，可以通过它来实现不同组件之间的消息传递。在Vue实例或Vue组件中充当一个中央枢纽，通过它可以让一个组件发出事件，而其他组件监听并响应这些事件

事件总线的创建

Vue3版本中，我们不再使用new Vue()来创建事件总线，而是通过mitt库，该库轻量且专注于事件总线功能。

npm install mitt

创建事件总线文件：

// src/EventBus.js
import mitt from 'mitt';

const emitter = mitt();

export default emitter;

发送事件

import EventBus from '@/utils/EventBus';

sendMessage() {
  // 有时由于执行顺序的原因，可能需要考虑微任务宏任务问题，可用setTimeout解决
  EventBus.emit('custom-event', { message: 'Hello' });
}

监听事件

import EventBus from '@/utils/EventBus';

// 接受方式1：
created() {
  EventBus.on('custom-event', this.handleCustomEvent);
},
beforeUnmount() {
  EventBus.off('custom-event', this.handleCustomEvent);
},

methods: {
  handleCustomEvent(payload) {
    this.receivedMessage = payload.message;
  }
}
// 接受方式2：
onMounted(() => {
  EventBus.on('custom-event', (message) => {
    handleBlur(message)
  });
});