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.vueimport { 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.jsimport { 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.jsimport { 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 来实现。全局事件监听：
如果需要在任何地方都能监听到某个事件并做出响应，则可以使用自己封装的全局事件总线来实现。
