在 Vue.js 的开发中，经常需要实现组件之间的通信，比如父子组件之间的传值、兄弟组件之间的交互等等。而在实现这些功能时，我们可以使用 Vue.js 提供的 EventBus，它是一个事件总线，可以帮助我们方便地实现组件之间的通信。
EventBus 是什么？
EventBus 是一个事件总线，它可以将多个组件之间的事件进行联系和传递。在 Vue.js 中，EventBus 是一个独立的实例，它通过 $emit、$on、$off 等方法来实现事件的派发、监听和取消监听。在实现组件之间的通信时，我们可以通过 EventBus 来分发事件和监听事件，实现组件之间的通信。
EventBus 的优点
使用 EventBus 有以下几个优点：
- 易于使用：EventBus 的使用非常简单，只需要定义一个空的 Vue 实例，然后在组件中使用 $emit、$on、$off 方法就可以了。
- 解耦合：使用 EventBus 可以将组件间的通信变得更为独立，实现组件之间的解耦。
- 全局总线：EventBus 是一个全局的事件总线，可以实现任意组件之间的通信，极大的方便了组件间的交互和协作。
EventBus 的用法
安装 EventBus
在使用 EventBus 之前，我们需要安装它。
npm install vue-event-bus --save
引入 EventBus
在组件中引入 EventBus。
import Vue from 'vue' export const EventBus = new Vue()
在组件中使用 EventBus
在一个组件中使用 $emit 方法来触发一个事件，在其他组件中使用 $on 方法监听该事件，然后在 $on 方法中编写响应函数来处理接收到的事件内容。
比如，我们在父组件中定义了一个事件，并通过 $emit 方法来发射该事件。然后在子组件中使用 $on 方法监听该事件。
-- -------------------- ---- ------- -- --- ------ - -------- - ---- ---------------- --- -------- - ------------- - --------------------- ------ - - -- --- ------ - -------- - ---- ---------------- --- --------- - ------------------- --- -- - ---------------- -- --- -- -展开代码
在组件中解除事件监听
当组件销毁时，需要将该组件在 EventBus 上的事件监听取消掉，以免出现内存泄漏的问题。
beforeDestroy() { EventBus.$off('foo') }
EventBus 的示例代码
-- -------------------- ---- ------- -- ------------ -- ------ --- ---- ----- ------ ----- -------- - --- ----- -- ---------- -- ---------- ----- ------- ----------------------------------- ------ ----------- -------- ------ - -------- - ---- ---------------- ------ ------- - -------- - ------------- - --------------------- ------- -------- - - - --------- -- --------- -- -------- ------ - -------- - ---- ---------------- ------ ------- - --------- - ------------------- --- -- - ---------------- -- ------ ------ -- -- --------------- - -------------------- - - ---------展开代码
以上就是 Vue.js 中使用 EventBus 实现组件通信的方法。通过 EventBus，我们可以很方便地实现任意组件之间的通信，使得组件变得更加独立和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c811e1e46428fe9ee049e5
