在 Vue 中，组件通信是一个非常重要的概念。当我们构建一个大型的 Vue 应用程序时，通常会有多个组件之间需要进行数据交互和通信。Vue 提供了多种方法来实现组件通信，本文将为大家介绍这些方法并提供示例代码。
父子组件通信
在 Vue 中，父子组件之间的通信是最常见的场景。父组件可以通过 props 属性将数据传递给子组件，子组件可以通过 $emit 方法将事件传递给父组件。
props
props 是一个用于接收父组件数据的数组，每个元素表示一个 prop，其中包含了 prop 的名称、类型、默认值等信息。父组件可以将数据通过 props 传递给子组件，子组件则可以通过 this.props 访问这些数据。
-- -------------------- ---- -------
---- --- ---
----------
-----
------ ------------ -------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----- ---------
----------- -
-----
--
---- -- -
------ -
----- -----
---- --
-
-
-
---------
---- --- ---
----------
-----
-------- ---- ------
-------- --- ------
------
-----------
--------
------ ------- -
----- --------
------ -
----- -------
---- ------
-
-
---------在上面的示例中，父组件通过 props 将 name 和 age 数据传递给子组件，子组件则通过 props 接收这些数据并进行展示。
$emit
$emit 是一个用于触发事件的方法，它可以向父组件发送自定义事件，并可以传递参数。父组件可以通过 v-on 指令监听这些事件，并在事件处理函数中获取参数。
-- -------------------- ---- -------
---- --- ---
----------
-----
------ -----------------------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----- ---------
----------- -
-----
--
-------- -
-------------- ------ -
------------------- ----------
-
-
-
---------
---- --- ---
----------
-----
------- ---------------------------------
------
-----------
--------
------ ------- -
----- --------
-------- -
----------- -- -
---------------------- -----
-
-
-
---------在上面的示例中，子组件通过 $emit 方法触发了一个名为 sayHello 的自定义事件，并传递了一个参数。父组件则通过 v-on 指令监听了这个事件，并在事件处理函数中获取了这个参数。
兄弟组件通信
在 Vue 中，兄弟组件之间的通信通常需要通过共同的父组件来实现。父组件可以通过 props 将数据传递给子组件，子组件可以通过 $emit 方法将事件传递给父组件，父组件再将数据通过 props 传递给另一个子组件。
-- -------------------- ---- -------
---- --- ---
----------
-----
------- ------------ ------------------------------------
------- ----------------------------
------
-----------
--------
------ ------ ---- --------------
------ ------ ---- --------------
------ ------- -
----- ---------
----------- -
-------
------
--
---- -- -
------ -
----- -----
-------- --
-
--
-------- -
-------------- ------ -
------------ - ------- ---------
-
-
-
---------
---- --- - ---
----------
-----
------- ---------------------------------
------
-----------
--------
------ ------- -
----- ---------
------ -
----- ------
--
-------- -
----------- -- -
---------------------- ----------
-
-
-
---------
---- --- - ---
----------
-----
----- ------- ------
------
-----------
--------
------ ------- -
----- ---------
------ -
-------- ------
-
-
---------在上面的示例中，父组件通过 props 将 name 数据传递给了子组件 1，子组件 1 通过 $emit 方法将事件传递给了父组件，父组件再将数据通过 props 传递给了子组件 2，最终子组件 2 展示了这个数据。
跨级组件通信
在 Vue 中，跨级组件之间的通信通常需要通过 provide/inject 或事件总线来实现。
provide/inject
provide/inject 是一种用于跨级组件通信的高级特性，它可以在祖先组件中提供数据，然后在后代组件中注入这些数据。
-- -------------------- ---- -------
---- ---- ---
----------
-----
---------------
------
-----------
--------
------ ------- -
----- --------------
------- -- -
------ -
----- ----
-
-
-
---------
---- --- ---
----------
-----
-------------------------
------
-----------
--------
------ ---------- ---- ------------------
------ ------- -
----- --------
----------- -
----------
-
-
---------
---- ---- ---
----------
-----
----- ---- ------
------
-----------
--------
------ ------- -
----- -------------
------- --------
-
---------在上面的示例中，祖先组件通过 provide 方法提供了一个名为 name 的数据，后代组件通过 inject 属性注入了这个数据，然后就可以在组件中访问这个数据了。
事件总线
事件总线是一种用于跨级组件通信的简单方法，它可以在任何组件中触发事件，并可以在其他组件中监听这些事件。
-- -------------------- ---- -------
-- ----
----- -------- - --- -----
-- -- -
------ ------- -
----- -------------
-------- -
----------- -- -
------------------------ ------- --------
-
-
-
-- -- -
------ ------- -
----- -------------
------- -- -
---------------------- ------- -- -
--------------------
--
-
-在上面的示例中，事件总线是一个新创建的 Vue 实例，它可以在任何组件中触发事件，并可以在其他组件中监听这些事件。组件 A 在点击事件中触发了一个名为 eventA 的事件，并传递了一个参数。组件 B 则在 created 生命周期中监听了这个事件，并在事件处理函数中获取了这个参数。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d8788ca941bf7134ef1798