在 Vue.js 中，父子组件之间的通信是相对简单的，但是当我们需要在非父子关系的组件之间进行通信时，就需要一些特殊的技术方法。本文将介绍如何使用 Vue.js 中的 provide/inject 和 event bus 技术实现非父子组件之间的通信。
provide/inject
provide/inject 是 Vue.js 中用于处理祖先组件向后代组件传递数据的一种选项。与 props 不同，provide/inject 可以在非直接后代组件中使用，即使这些后代组件不在同一个父级层次中。 provide/inject 可以像 props 一样用于响应式数据，也可以用于非响应式数据。
下面是一个示例，父组件中的 provide 选项提供了一个名为 user 的对象，子组件中可以使用 inject 选项注入该对象：
---- --------- -- ---
----------
-----
------------------
------ ---------------
------
-----------
--------
------ ------- -
------- ---------
------ -
------ -
----- --------------
-
-
-
---------
---- --- -- ---
----------
-----
-------------------------
------
-----------
--------
------ ------- -
--------- -
------ -
----- -
----- ----
-
-
-
-
---------在上面的示例中，我们在 App 组件中使用 provide 选项提供了一个名为 user 的对象，该对象包含一个名为 name 的属性。NameInput 组件中使用 inject 选项将这个对象注入并使用对象的 name 属性绑定到输入框上。这样，在 NameInput 组件中修改 name 的值将会反映到 App 组件提供的 user 对象上。
当需要在多个组件之间共享数据时，可以将 provide/inject 与 Vuex 这样的状态管理库结合使用。
event bus
event bus（事件总线）是 Vue.js 中一种用于处理非父子组件间通信的方法。它是通过一个全局的 Vue 实例作为事件中心，其他组件在该实例下监听和触发事件来实现通信。
下面是一个使用 event bus 的示例：
-- -----------
------ --- ---- -----
------ ----- -------- - --- -----
-- ----------
--------
------ - -------- - ---- ---------------
------ ------- -
-------- -
------------- -
------------------------ --------
-
-
-
---------
-- ----------
----------
-----
------ ------- -------
------
-----------
--------
------ - -------- - ---- ---------------
------ ------- -
------ -
------ -
-------- --
-
--
--------- -
---------------------- ------ -- -
------------ - ----
--
-
-
---------在上面的示例中，我们使用了 eventBus.js 文件中导出的 EventBus 对象。Child1 组件通过调用 EventBus.$emit 方法触发了名为 event1 的事件并发送了一个名为 hello 的字符串数据。Child2 组件则通过调用 EventBus.$on 方法监听 event1 事件，并使用接收到的字符串数据更新了 message 属性，该属性将显示在 Child2 组件的模板中。
event bus 虽然简单易用，但也会带来一些问题，如组件之间可能会出现数据流难以追踪的问题，还可能导致一些不必要的事件监听。当我们需要在多个组件间共享数据时，可以考虑使用 Vuex 等状态管理库。
结论
本文介绍了两种常用于实现非父子组件通信的方法：provide/inject 和 event bus。provide/inject 可以用于在层次较深的组件中传递数据，而 event bus 则适用于需要频繁通信的场景。在实际开发中，应根据具体情况进行选择。
同时，本文也提到了使用 Vuex 等状态管理库来处理组件间共享数据时的优势。状态管理库可以提高应用的可维护性，并且可以方便地处理异步操作等复杂情况。当需要在多个组件之间共享相同的状态时，这些库可以是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710b62f377015f5a1a24fee