vue3 EventBus 注册到使用完整代码

Vue3中的EventBus是一种常见的模式，用于管理组件之间的通信。它允许你在应用程序的不同部分发布事件并订阅这些事件。以下是一个基本的Vue3 EventBus注册和使用的完整代码示例：

首先，在项目根目录下创建一个`eventBus.js`文件，作为全局EventBus：

// eventBus.js
import { createApp } from 'vue';
export default new Vue();

然后，在需要使用EventBus的地方引入：

// App.vue 或其他组件
import EventBus from '@/utils/eventBus';

export default {
  setup() {
    // 注册事件
    EventBus.$on('exampleEvent', (data) => {
      console.log(`Received data: ${data}`);
    });

    // 发布事件
    EventBus.$emit('exampleEvent', 'This is an example message');

    return {};
  },
};

在这个例子中，`$on`方法用于监听事件，当`exampleEvent`触发时，会打印接收到的数据。`$emit`方法则是用来触发事件，并传递数据。

要在其他组件中使用EventBus，只需要导入并使用`$on`和`$emit`方法即可。

**注意:** 这里假设你已经设置了一个模块化的结构，并通过`@`符号来引用相对路径。实际应用中，EventBus通常会被注入到Vue实例中，以便所有组件都可以访问。此外，还可以考虑使用Vuex或者自定义槽slot来进行组件间的通信，这取决于具体的需求场景。