vue3中的event bus

• 前言
• vue2中的event bus
• event bus在vue3中的体现
• 创建一个vue3的event bus
• 封装的event bus最优使用场景
  

前言

event Bus在vue3中事实上已经被删除了，因为官方说它可能会导致一些潜在的问题。如，在大型项目中使用 Event Bus 可能会变得难以维护和调试，同时也可能会影响应用程序的性能。

此外，在 Vue 3.x 中已经有更多先进和强大的工具来进行组件之间通信，例如 provide/inject 和 Emit/Listeners 等机制。因此，Vue 3.x 团队决定删除 Event Bus，以鼓励开发者使用更好的解决方案。

但是还有很多项目是相对较小的，依然是可以使用的。尽管有了更好的方法，但是在不滥用的情况下，event bus还是有适合它的使用场景的，甚至在某些场景下，它更简单，更方便。

vue2中的event bus

Vue 2 中的事件总线 Event Bus 是一种用于跨组件通信的机制。通过创建一个全局的 EventBus 对象，可以在任何组件中触发和监听自定义事件，实现组件之间的解耦。

Event Bus 的实现步骤如下：

⭐创建一个全局的 EventBus 对象

// EventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

⭐在需要使用 Event Bus 的组件中引入并注册 EventBus 对象

// ComponentA.vue
import { eventBus } from './EventBus';
export default {
  name: 'ComponentA',
  methods: {
    handleClick() {
      // 触发自定义事件
      eventBus.$emit('custom-event', data);
    }
  },
  created() {
    // 监听自定义事件
    eventBus.$on('custom-event', (data) => {
      console.log('Received data:', data);
    });
  }
}

⭐在另一个组件中也可以引入并注册 EventBus 对象，然后同样通过 $emit 和 $on 方法进行事件的触发和监听。

使用 Event Bus 可以轻松地实现兄弟、父子等关系不直接相连的组件之间进行通信。但是，如果过度使用会导致代码难以维护和理解，建议在必要时才使用 Event Bus。

所以，不要滥用，不要滥用，不要滥用！！！

event bus在vue3中的体现

event Bus（事件总线）是一种在组件之间通信的模式，它可以让任何两个组件之间进行通信，而不必担心组件层次结构或父子关系。在 Vue 3 中，event Bus 的实现方式与 Vue 2 相同，即通过创建一个全局 Vue 实例作为中央事件总线。但是在 Vue 3 中，由于引入了 Composition API，我们可以使用 provide 和 inject API 来创建自己的 event Bus。这种方式更加灵活，可以更好地支持 Composition API。

创建一个vue3的event bus

⭐在 Vue 3 中，可以使用 createApp 函数创建应用实例，并使用 provide 和 inject API 来创建一个支持 Vue 3 的 Event Bus。

// EventBus.js
import { createApp, inject } from 'vue'
const EventBusSymbol = Symbol()
const EventBus = {
  install(app) {
    const eventBus = createApp({})
    app.provide(EventBusSymbol, eventBus)
  },
  useEventBus() {
    const eventBus = inject(EventBusSymbol)
    if (!eventBus) {
      throw new Error('Event Bus not found')
    }
    return eventBus
  }
}
export default EventBus

我们首先创建了一个 EventBusSymbol，用于标识我们创建的全局事件总线。然后，我们定义了一个 EventBus 对象，该对象包含了一个 install 方法和一个 useEventBus 方法。

在 install 方法中，我们使用 createApp 函数创建了一个空的 Vue 应用实例，并通过 app.provide 方法将其挂载到应用实例上，使其成为一个全局的事件总线。

在 useEventBus 方法中，我们使用 inject API 获取到应用实例，如果不存在则抛出一个错误。然后，我们返回这个应用实例，这样就可以在组件中使用它来进行事件的发布和订阅了。

OK,继续。我们在 Vue 3 中创建一个支持 Event Bus 的应用实例:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import EventBus from './EventBus'
const app = createApp(App)
app.use(EventBus)
app.mount('#app')

在上面的代码中，我们首先导入 EventBus 对象，然后使用 app.use 方法将其挂载到应用实例上。这样，我们就可以在应用中使用 useEventBus 方法来获取全局事件总线了。

封装的event bus最优使用场景

尽管在 Vue 3 中提供了一些新的 API，如 provide/inject、Emits/Listeners 等，这些功能可以用来处理组件之间的通信，而且更加强大和灵活。

因此，在某些情况下，Vue 3 提供的方法可以完全替代 Vue 2 的 Event Bus。但是，在一些特定场景下，创建一个event Bus 可能仍然是一个不错的选择。

比如说：

非父子组件之间的通信：

如果需要在非父子关系的组件之间进行通信，可以使用自己封装的 Event Bus 实现跨级通信。

多个兄弟组件之间的通信：

如果需要多个兄弟组件之间相互通信，则可以使用自己封装的 Event Bus 来实现。

全局事件监听：

如果需要在任何地方都能监听到某个事件并做出响应，则可以使用自己封装的全局事件总线来实现。