vue3 全局事件总线的使用流程

Vue3中，全局事件总线（Event Bus）的使用流程相较于Vue2有所不同，主要因为Vue3推荐使用组合式API（Composition API）。以下是在Vue3中使用全局事件总线的步骤：

1. 创建Event Bus实例：
在Vue3中，你可以使用`mitt`库或者创建一个简单的Event Bus实例。这里以创建一个简单的Event Bus为例：

   import { mitt } from 'mitt';

   const eventBus = mitt();

   export default eventBus;

或者不使用任何库，直接创建一个空对象来作为Event Bus：

   const eventBus = {
     emit: (event, payload) => {},
     on: (event, fn) => {},
     off: (event, fn) => {},
     once: (event, fn) => {},
   };

   export default eventBus;

2. 在应用中引入Event Bus：
在你的Vue应用中，你可以将Event Bus引入并在应用的生命周期内使用。

   import eventBus from './eventBus';

3. 在Vue组件中使用Event Bus：
- 发送事件（Emitting Events）：
在组件中，你可以使用`emit`方法来发送事件，并传递任何必要的数据。

     // 发送消息事件
     eventBus.emit('message', 'Hello from Component A');

- 监听事件（Listening to Events）：
你可以使用`on`方法来监听特定的事件，并在事件发生时执行回调函数。

     // 在Component B中监听message事件
     eventBus.on('message', (msg) => {
       console.log(msg);  // 输出: Hello from Component A
     });

- 停止监听事件（Stopping to Listen）：
使用`off`方法来取消之前注册的事件监听。

     // 停止监听message事件
     eventBus.off('message', (msg) => {
       console.log(msg);
     });

- 单次监听事件（Listening Once）：
如果你只想监听一次事件，可以使用`once`方法。

     // 只监听一次message事件
     eventBus.once('message', (msg) => {
       console.log(msg);  // 只会输出一次
     });

4. 在Vue3中，推荐使用Composition API来管理组件内的事件监听和取消监听，以保证组件销毁时，事件监听被正确清除。