vue3 eventbus

Vue 3 中的事件总线 (EventBus) 并不像 Vue 2 中那样直接可用。但是，你仍然可以创建一个类似的全局事件总线，并在应用程序的不同组件之间进行通信。

一种常见的方法是通过创建一个单独的 Vue 实例来实现事件总线。你可以在应用程序的入口文件中创建该实例，并将其导出以供其他组件使用。

下面是一个示例代码，展示了如何在 Vue 3 中实现一个简单的事件总线：

// event-bus.js

import { createApp } from 'vue';

const app = createApp({});
const eventBus = app.config.globalProperties.$eventBus = app.mount('#app');

export default eventBus;

在上面的代码中，我们先创建了一个空的 Vue 应用程序实例 `app`，然后将其作为事件总线 `eventBus` 导出。我们通过 `app.config.globalProperties` 将 `eventBus` 注册为全局属性，这样我们就可以在任何组件中使用它。

然后，在你想要使用事件总线的组件中，你可以通过 `this.$eventBus` 访问该实例，并使用它来发送和接收事件：

// ComponentA.vue

export default {
  mounted() {
    this.$eventBus.$emit('eventName', data);
  }
}

// ComponentB.vue

export default {
  created() {
    this.$eventBus.$on('eventName', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理事件数据
    }
  }
}

通过上述代码，`ComponentA` 可以通过 `$emit` 方法触发名为 `'eventName'` 的事件，并传递数据。而 `ComponentB` 则通过 `$on` 方法监听该事件，并在事件发生时执行相应的处理函数 `handleEvent`。

这样，你就可以在 Vue 3 中实现一个类似于 Vue 2 中的事件总线。希望对你有所帮助！