前言
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 来实现。文章来源：https://www.toymoban.com/news/detail-478916.html全局事件监听：
如果需要在任何地方都能监听到某个事件并做出响应，则可以使用自己封装的全局事件总线来实现。文章来源地址https://www.toymoban.com/news/detail-478916.html
到了这里，关于vue3中的event bus的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
