Vue.js 是一款流行的 JavaScript 框架，它采用组件化的方式进行开发。在一个大型的 Web 应用程序中，可能会有很多个组件需要相互通信，而在 Vue.js 中，有 6 种不同的方式可以实现组件通信。本文将介绍这 6 种方式，并提供详细的示例代码。
1. 父子组件通信
在 Vue.js 中，父组件可以向子组件传递数据，同时子组件可以向父组件发送消息。父子组件通信的方式有以下两种：
使用 Props
Props 是 Vue.js 中一个非常重要的概念，它表示父组件向子组件传递数据。通过在子组件中定义 Props，父组件就可以向子组件传递数据了。下面是一个使用 Props 进行父子组件通信的示例：
-- -------------------- ---- -------
---- --- ---
----------
-----
---------------- -------------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
---------------
--
------ -
------ -
-------- ------- --------
--
--
--
---------
---- --- ---
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
-------- ---
--
--
--
---------在上面的示例中，父组件向子组件传递了一个名为 message 的字符串变量。这个变量被子组件中定义的 Props 接收到，并渲染在视图中。
使用 $emit
在 Vue.js 中，子组件可以通过 $emit 方法向父组件发送消息。当子组件需要在某个事件发生后通知父组件时，就可以使用 $emit 方法。
下面是一个使用 $emit 方法进行父子组件通信的示例：
-- -------------------- ---- -------
---- --- ---
----------
-----
---------------- ------------------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
---------------
--
-------- -
------------- -
-- ----
--
--
--
---------
---- --- ---
----------
---- ------------------------ --------
-----------
--------
------ ------- -
-------- -
----------- -
-----------------------
--
--
--
---------在上面的示例中，子组件中定义了一个 emitEvent 方法，当用户点击子组件时，该方法会触发 $emit 方法，向父组件发送 my-event 消息。
2. 兄弟组件通信
如果两个组件之间没有父子关系，它们也需要相互通信，这时就需要使用一些其他的方式了。下面是两种常见的兄弟组件通信方式：
使用中央事件总线
中央事件总线是一种非常简单、易于实现的兄弟组件通信方式，它需要一个单独的事件通道来维护组件之间的通信关系。下面是一个使用中央事件总线进行兄弟组件通信的示例：
-- -------------------- ---- -------
-- -----------
------ --- ---- ------
------ ------- --- ------
-- --------------
------ -------- ---- ----------------
------ ------- -
-------- -
------------- -
-------------------------- ------
--
--
--
-- --------------
------ -------- ---- ----------------
------ ------- -
--------- -
------------------------ ------ -- -
-- ----
---
--
--在上面的示例中，我们先创建了一个 EventBus 实例，然后通过 $emit 方法来触发 my-event 事件，并在另一个组件中通过 $on 方法监听 my-event 事件，以响应该事件。
使用 Vuex
Vuex 是 Vue.js 的官方状态管理库，它可以用于管理全局状态，并且可以让组件之间相互通信。通过 Vuex，我们可以将应用程序的状态从组件中抽离出来，并将它存储在一个专门的状态容器中。下面是一个使用 Vuex 进行兄弟组件通信的示例：
-- -------------------- ---- -------
-- --------
------ --- ---- ------
------ ---- ---- -------
--------------
------ ------- --- ------------
------ -
------ --
--
---------- -
---------------- -
--------------
--
--
---
-- --------------
------ ------- -
-------- -
------------- -
--------------------------------
--
--
--
-- --------------
------ ------- -
--------- -
------- -
------ ------------------------
--
--
--在上面的示例中，我们先创建了一个 Vuex Store，然后在组件中使用 $store.commit 方法来触发 mutations，从而修改组件的状态。组件中也可以使用计算属性来访问 Store 中的状态。
3. 跨级组件通信
在 Vue.js 中，跨级组件通信是一件比较困难的事情，因为 Vue.js 中父组件不能直接访问子组件的 Props，而子组件也不能直接访问父组件的状态。下面是两种常见的跨级组件通信方式：
使用 provide 和 inject
在 Vue.js 中，父组件可以通过 provide 方法向它的所有子孙组件注入一个数据对象，子孙组件可以通过 inject 方法访问这个数据对象。这种方式不太符合 Vue.js 的 Reactivity 响应式原则，所以在实际场景中慎用。
下面是一个使用 provide 和 inject 进行跨级组件通信的示例：
-- -------------------- ---- -------
---- --------------- ---
----------
-----
--------
---------------
---------
------
-----------
--------
------ ------ ---- ---------------
------ ------- -
-------- -
-------- ------- --------
--
----------- -
-------
--
--
---------
---- ---------- ---
----------
-----
-------------
------
-----------
--------
------ ------- -
------- ------------
--
---------
---- --------- ---
----------
------- ------- --------
-----------
--------
------ ------- -
------- ------------
--
---------在上面的示例中，我们使用 provide 方法在 GrandParent 组件中向所有的子孙组件注入了一个名为 message 的字符串变量。然后在 Parent 和 Child 组件中分别通过 inject 方法注入 message 变量，以访问它。
使用事件总线
事件总线也可以用于跨级组件通信，它是一种全局的事件通道，通过它可以在任何组件中监听和触发事件。和兄弟组件通信时一样，这种方式也不太符合 Vue.js 的 Reactivity 响应式原则。
下面是一个使用事件总线进行跨级组件通信的示例：
-- -------------------- ---- -------
-- -----------
------ --- ---- ------
------ ------- --- ------
-- ----------
------ -------- ---- ----------------
------ ------- -
--------- -
------------------------ ------ -- -
-- ----
---
--
--
-- ---------
------ -------- ---- ----------------
------ ------- -
-------- -
------------- -
-------------------------- ------
--
--
--在上面的示例中，我们使用了自定义事件 my-event，并在 Parent 组件中通过 $on 来监听事件，然后在 Child 组件中通过 $emit 来触发该事件。
总结
本文介绍了 Vue.js 中 6 种不同的组件通信方式，涵盖了大部分场景。在实际使用中，我们需要根据不同的业务需求，选择合适的通信方式来实现组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ffddb968c7c53b0e27bad