Vue.js 是一套用于构建用户界面的渐进式框架。在 Vue.js 中，组件是一种抽象的概念，具有自己独立的作用域。那么，如何让不同的 Vue.js 组件进行通信呢？本文将介绍 Vue.js 组件如何进行通信，并提供示例代码。
父子组件通信
当一个子组件和父组件之间需要通信时，可以向子组件传递 props 属性，子组件通过改变 props 属性的值，从而实现向父组件传递数据。
父组件：
-- -------------------- ---- -------
----------
-----
---------------- -----------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
----- ------------------
---- -- -
------ -
---------- ------- - -- --- ------ ----------
-
--
----------- -
--------------
-
-
---------子组件：
-- -------------------- ---- -------
----------
-----
----- --- ------
------- ------------------------- ------ ------------
------
-----------
--------
------ ------- -
----- -----------------
------ -
---- -
----- -------
-------- --
-
--
-------- -
--------- -- -
------------------------ ------- - -- --- ----- -----------
-
-
-
---------在子组件中，通过 $emit 方法向父组件发送一个 change-msg 的事件，并传递一个新的值。在父组件中，可以通过在子组件中绑定的 v-on:change-msg 监听这个事件，再改变 parentMsg 的值。
兄弟组件通信
当两个兄弟组件需要通信时，可以通过一个共同的祖先组件来实现通信。
共同的祖先组件：
-- -------------------- ---- -------
----------
-----
---------- ---------- ------------------------------------
---------- -----------------------
------
-----------
--------
------ -------- ---- ----------------
------ -------- ---- ----------------
------ ------- -
----- --------------------
---- -- -
------ -
---- -------- ---- -------- ----------
-
--
----------- -
---------
--------
--
-------- -
--------- -------- -
-------- - ------
-
-
-
---------在共同的祖先组件中，通过向两个兄弟组件传递 props 属性，将共享的数据传递给子组件。同时，当一个子组件改变了这个数据时，它会通过 $emit 方法向祖先组件发送 change-msg 的事件，并传递新的值。在祖先组件中，可以通过 v-on:change-msg 监听这个事件，并改变 msg 的值。由于两个子组件都绑定了相同的父级 data，当 msg 的值改变时，两个子组件都会更新显示。
非父子组件通信
当两个不是父子关系的组件需要通信时，可以使用 Vue.js 提供的 Event Bus。
Event Bus 是一个空的 Vue 实例，用于组件之间的通信。具体实现方法如下：
// EventBus.js import Vue from 'vue' export default new Vue()
在需要进行组件通信的组件中，引入 Event Bus，然后在它们的 created 生命周期中分别订阅和发送事件：
-- -------------------- ---- -------
---- ---------------- ---
--------
------ -------- ---- -------------------
------ ------- -
----- ---------------
------- -- -
-------------------------- ----- -- -
-------- - ---
--
--
-------- -
--------- -- -
---------------------------- ------- - -- --------------
-
-
-
----------- -------------------- ---- -------
---- ---------------- ---
--------
------ -------- ---- -------------------
------ ------- -
----- ---------------
------- -- -
-------------------------- ----- -- -
-------- - ---
--
--
-------- -
--------- -- -
---------------------------- ------- - -- --------------
-
-
-
---------Event Bus 实例是一个全局对象，可以在任何组件中引用和使用。通过事件名称和参数，可以在任何组件中发送和接收该事件。当其中一个组件发送一个事件时，其他订阅该事件的组件将会接收到并处理这个事件。
总结
本文介绍了 Vue.js 组件如何进行通信，包括父子组件通信、兄弟组件通信和非父子组件通信。对于一个复杂的应用程序，组件通信是非常重要的，同时也是非常有挑战性的。我们需要根据具体情况，选择正确的通信方式来实现组件之间的信息传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645871f4968c7c53b0ad398f