事件总线编辑vue3

在Vue 3中，事件总线的实现方式有所变化。Vue 2中我们可以通过创建一个新的Vue实例作为事件总线，然后使用$on、$emit和$off等方法进行事件的监听、触发和取消监听。而在Vue 3中，官方不再推荐使用全局的事件总线，而是鼓励使用Composition API中提供的新特性来处理组件间的通信。

在Vue 3中，我们可以使用`createApp`函数创建一个应用实例，并通过`provide`函数和`inject`函数来实现组件之间的通信。具体步骤如下：

1. 创建一个新的应用实例，并将它作为根组件：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

2. 在根组件中使用`provide`函数提供一个事件总线：

import { provide } from 'vue';

app.provide('eventBus', {
  // 在这里定义事件相关的方法和数据
});

3. 在其他组件中使用`inject`函数来注入事件总线，并使用它进行事件的监听和触发：

import { inject } from 'vue';

export default {
  setup() {
    const eventBus = inject('eventBus');

    // 监听事件
    eventBus.$on('eventName', (data) => {
      // 处理事件
    });

    // 触发事件
    eventBus.$emit('eventName', eventData);
  }
}

这样就可以在Vue 3中实现组件之间的事件通信了。请注意，这种方式更加灵活和可控，因为事件总线只限定在了特定的作用域内，不会影响全局的事件处理。