vue中eventBus的原理

Vue中的eventBus是一种用于在组件之间进行通信的机制。它基于Vue实例作为中央事件总线，允许任何组件在触发事件时向总线发布消息，同时也允许其他组件订阅这些事件并在事件发生时执行相应的操作。

eventBus的原理如下：
1. 创建一个全局的Vue实例作为事件总线。可以在main.js文件中创建一个新的Vue实例，并将其作为事件总线挂载到Vue原型上，以便在整个应用程序中访问。

// main.js
import Vue from 'vue'

Vue.prototype.$eventBus = new Vue()

2. 在发送组件中，使用$emit方法触发事件并传递数据。可以在任何需要触发事件的组件中使用`this.$eventBus.$emit(eventName, data)`来发布一个事件，并通过data参数传递需要传递的数据。

// 发送组件
this.$eventBus.$emit('eventName', data)

3. 在接收组件中，使用$on方法订阅事件并定义相应的操作。可以在需要接收事件的组件中使用`this.$eventBus.$on(eventName, callback)`来订阅一个事件，并通过callback函数来定义在事件触发时执行的操作。

// 接收组件
this.$eventBus.$on('eventName', (data) => {
  // 执行相应操作
})

通过以上步骤，发送组件可以通过事件总线发布消息，接收组件可以通过事件总线订阅事件并执行相应操作，实现了组件之间的通信。

需要注意的是，eventBus是一个全局的事件总线，因此在大型应用中，可能会导致事件命名冲突或产生难以维护的代码。因此，在使用eventBus时需谨慎管理事件名称，避免命名冲突，并且在组件销毁时取消订阅以避免内存泄漏。