Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面和单页应用程序。在 Vue.js 中，组件是构建应用程序的基本单元，但是组件之间的通信可能是一个棘手的问题。在本文中，我们将介绍六种不同的方式来实现 Vue.js 组件间的通信。
1. 父子组件通信
在 Vue.js 中，父子组件之间的通信是最常见的一种方式。父组件可以通过 props 属性将数据传递给子组件，子组件可以通过 $emit 方法将事件传递回父组件。
-- -------------------- ---- -------
---- --- ---
----------
---------------- ------------------ --------------------------------------------------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- ------- -------
--
--
-------- -
------------------------- -
------------ - -----------
-
-
--
----------- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
------- ----------------------------- ----------------
------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
--------- ----
-
--
-------- -
--------------- -
----- ---------- - ------- ---------
---------------------------- ------------
-
-
--
---------在上面的代码中，父组件通过 prop 属性将 message 数据传递给子组件。子组件可以通过 $emit 方法将 update-message 事件传递回父组件，并将新的消息作为参数传递。
2. 子父组件通信
与父子组件通信类似，子父组件通信可以通过 $emit 方法将事件传递回父组件。但是，在这种情况下，父组件需要使用 $refs 属性引用子组件，并且子组件需要使用 $parent 属性访问其父组件。
-- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
---------------- ------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- ------- -------
--
--
-------- -
------------------------- -
------------ - -----------
-
-
--
----------- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
------- ----------------------------- ----------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- --------
--
--
-------- -
--------------- -
----- ---------- - ------- --------
---------------------------- ------------
-------------------- - -----------
-
-
--
---------在上面的代码中，父组件通过 $refs 属性引用子组件。子组件可以通过 $emit 方法将 update-message 事件传递回父组件，并将新的消息作为参数传递。子组件还使用 $parent 属性访问其父组件，并将消息更新为新的消息。
3. 兄弟组件通信
在 Vue.js 中，兄弟组件之间的通信可以通过一个共享的 Vue 实例来实现。这个共享的 Vue 实例可以作为一个事件总线，用于在组件之间传递事件和数据。
<!-- EventBus.js --> import Vue from 'vue'; export default new Vue();
-- -------------------- ---- -------
---- ---- - ---
----------
-----
----- ------- ------
------- ----------------------------- ----------------
------
-----------
--------
------ -------- ---- ----------------
------ ------- -
------ -
------ -
-------- ------- -------
--
--
-------- -
--------------- -
----- ---------- - ------- ---------
-------------------------------- ------------
-
-
--
----------- -------------------- ---- -------
---- ---- - ---
----------
-----
----- ------- ------
------
-----------
--------
------ -------- ---- ----------------
------ ------- -
------ -
------ -
-------- ------- -------
--
--
--------- -
------------------------------ ------------ -- -
------------ - -----------
---
-
--
---------在上面的代码中，我们创建了一个名为 EventBus 的共享 Vue 实例。兄弟组件 A 在更新消息时使用 $emit 方法将 update-message 事件传递给 EventBus。兄弟组件 B 在创建时使用 $on 方法监听 update-message 事件，并在事件触发时更新其消息。
4. Vuex 状态管理
Vuex 是 Vue.js 的状态管理库，可用于管理应用程序中的共享状态。使用 Vuex，所有组件都共享同一个状态对象，并且可以使用 Vuex 提供的 action、mutation 和 getter 方法来修改和访问状态。
-- -------------------- ---- -------
---- -------- ---
------ --- ---- ------
------ ---- ---- -------
--------------
------ ------- --- ------------
------ -
-------- ------- -------
--
---------- -
-------------------- ----------- -
------------- - -----------
-
--
-------- -
--------------- ------ -- ----------- -
----------------------- ------------
-
--
-------- -
-------------- -
------ --------------
-
-
----- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
-----------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ----- ---- -------------
------ ------- -
----------- -
--------------
--
--------- -
--------- -
------ ----------------------------
-
-
--
----------- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
------- ----------------------------- ----------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
--------- -
--------- -
------ ----------------------------
-
--
-------- -
--------------- -
----- ---------- - ------- ---------
------------------------------------- ------------
-
-
--
---------在上面的代码中，我们创建了一个名为 store 的 Vuex 实例，用于管理应用程序中的状态。父组件通过 computed 属性访问 store 中的消息。子组件也通过 computed 属性访问 store 中的消息，并使用 $store.dispatch 方法调用 updateMessage action 更新消息。
5. $attrs 和 $listeners 属性
在 Vue.js 中，组件可以使用 $attrs 和 $listeners 属性来传递属性和事件。$attrs 属性包含组件上未被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。$listeners 属性包含了父组件传递给子组件的所有事件监听器。
-- -------------------- ---- -------
---- --- ---
----------
---------------- --------------- ------- --------------------------------------------------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
--------------
--
-------- -
------------------------- -
------------------------
-
-
--
----------- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
------- ----------------------------- ----------------
------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
--------- ----
-
--
-------- -
--------------- -
----- ---------- - ------- ---------
---------------------------- ------------
-
-
--
---------在上面的代码中，父组件使用 @update-message 事件监听器将 updateMessage 方法传递给子组件。子组件使用 $emit 方法将 update-message 事件传递回父组件，并将新的消息作为参数传递。
6. Provide 和 Inject
在 Vue.js 中，组件可以使用 provide 和 inject 属性来传递数据。provide 属性可以是一个对象或函数，用于向所有子组件提供数据。inject 属性是一个对象，用于从父组件中注入数据。
-- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
-----------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
--------------
--
--------- -
------ -
-------- ------- -------
--
-
--
----------- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
------
-----------
--------
------ ------- -
------- -----------
--
---------在上面的代码中，父组件使用 provide 属性向所有子组件提供 message 数据。子组件使用 inject 属性从父组件中注入 message 数据，并将其绑定到组件的 message 属性上。
结论
Vue.js 组件间通信是一个重要的主题，因为它可以帮助我们构建更复杂和更灵活的应用程序。本文介绍了六种不同的方式来实现 Vue.js 组件间的通信，包括父子组件通信、子父组件通信、兄弟组件通信、Vuex 状态管理、$attrs 和 $listeners 属性以及 Provide 和 Inject。希望这些技术可以帮助你更好地理解 Vue.js 组件间通信的工作原理，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677914ed381bbe667f8d9e9c