在 Vue.js 的组件化开发中，组件之间的通信是一个常见的问题。通常情况下，父组件可以通过 props 将数据传递给子组件，但是当需要在不同级别的组件之间传递数据时，这种方式就显得不够灵活。Vue.js 提供了一种解决方案，即使用事件总线 Event Bus 来实现组件间通信。
什么是事件总线 Event Bus
事件总线 Event Bus 是一种实现组件间通信的方式，它是一个全局的 Vue 实例，可以在任何组件中使用。通过事件总线，不同的组件可以相互通信，实现数据的传递和状态的同步。
如何使用事件总线 Event Bus
在 Vue.js 中，我们可以通过创建一个全局的 Vue 实例来实现事件总线。下面是一个简单的示例：
-- ------- ------ --- ---- ----- ------ ----- -------- - --- ----- -- -- - ---------------------------- ----- -- -- - -------------------------- ---- -- - -- ---- --
在上面的代码中，我们在 main.js 文件中创建了一个全局的 Vue 实例 EventBus，并通过 export 将其导出，这样在其他组件中就可以直接使用。
在组件 A 中，我们通过 EventBus.$emit 方法触发一个名为 event-name 的事件，并传递了一个数据 data。
在组件 B 中，我们通过 EventBus.$on 方法监听名为 event-name 的事件，并在回调函数中处理传递过来的数据。
示例代码
下面是一个更完整的示例，演示了如何使用事件总线 Event Bus 在两个不同的组件之间传递数据。
---- ------- ---
----------
-----
------ ------- -------
---------------------------------
------
-----------
--------
------ - -------- - ---- --------
------ -------------- ---- ----------------------
------ ------- -
----- ------
----------- -
--------------
--
------ -
------ -
-------- --
-
--
--------- -
-- ---- ----------- ---
--------------------------- ------- -- -
------------ - -------
--
-
-
------------- ------------------ ---
----------
-----
------ ---------------------- --
------- ---------------------------------
------
-----------
--------
------ - -------- - ---- --------
------ ------- -
----- -----------------
------ -
------ -
------------- --
-
--
-------- -
------------ -
-- ---- ----------- ------------
----------------------------- ------------------
-
-
-
---------在上面的示例中，我们在 App.vue 组件中监听名为 set-message 的事件，并在回调函数中将传递过来的数据 message 赋值给组件的 message 数据。
在 ChildComponent.vue 组件中，我们通过 input 绑定 v-model 实现了输入框和 data 中 inputMessage 的双向绑定。当用户点击“设置消息”按钮时，我们通过 EventBus.$emit 方法触发名为 set-message 的事件，并将输入框中的值传递给 App.vue 组件。
总结
事件总线 Event Bus 是 Vue.js 中一种非常有用的组件通信方式，它可以让不同级别的组件之间实现数据的传递和状态的同步。在使用事件总线时，需要注意不要滥用，避免出现混乱的事件流。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d00f29add4f0e0ff921d1e