Vue.js 是一个流行的前端框架，它具有清晰简洁的 API 和良好的组件化架构。然而随着应用的复杂度增加，组件之间的通信也变得复杂和困难。本文将介绍 Vue.js 中的组件间通信设计模式，包括父子组件通信、兄弟组件通信、跨级组件通信和非父子组件通信。
父子组件通信
父组件和子组件的通信是最基础和常用的组件通信方式。父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 触发事件向父组件传递数据。
props
当父组件需要向子组件传递数据时，可以通过 props 属性来实现。子组件通过 props 接收父组件传递的数据并在模板中使用。以下是一个父组件向子组件传递数据的示例：
-- -------------------- ---- -------
---- --- ---
----------
-----
------------- ------------------------------
------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
----------- -
-----------
--
---- -- -
------ -
------ ------ ------
-
-
-
---------
---- --- ---
----------
------- ----- --------
-----------
--------
------ ------- -
------ -
------ ------
-
-
---------在父组件中，通过将 title 通过 props 传递给子组件，在子组件中通过 {{ title }} 显示父组件传递的数据。
$emit
当子组件需要向父组件传递数据时，可以通过 $emit 方法来触发自定义事件，并传递数据。父组件可以通过监听子组件的事件来接收子组件传递的数据。以下是一个子组件向父组件传递数据的示例：
-- -------------------- ---- -------
---- --- ---
----------
-----
------------- -------------------------------------------------
-- ----- --
------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
----------- -
-----------
--
---- -- -
------ -
------ ------ ------
-
--
-------- -
----------------- ---------- -
---------- - --------
-
-
-
---------
---- --- ---
----------
---- --------------------------- -----------
-----------
--------
------ ------- -
-------- -
----------- -- -
-------------------------- --- -------
-
-
-
---------在子组件中，通过 $emit 触发 change-title 事件，并传递 'Hi World' 作为新的 title。在父组件中，通过监听 change-title 事件，并使用参数 newTitle 更新 title 字段。
兄弟组件通信
兄弟组件通信是指在同一层级的两个组件之间进行通信，这种通信方式非常常见。Vue.js 提供了多种方式来实现兄弟组件通信。
通过父组件
当两个兄弟组件都有一个共同的父组件时，可以通过父组件来传递数据。兄弟组件通过 props 接收父组件传递的数据，并通过 $emit 触发事件来通知父组件更新数据。
-- -------------------- ---- -------
---- --- ---
----------
-----
--------------- -------------- ---------------------------------------------------
--------------- --------------------------------
------
-----------
--------
------ ------------ ---- ----------------
------ ------------ ---- ----------------
------ ------- -
----------- -
-------------
------------
--
---- -- -
------ -
------ ------ ------
-
--
-------- -
----------------- ------- -
---------- - -----
-
-
-
---------
---- --- - ---
----------
-----
------ ----------- -------------- ----------------------
------- --------------------------- --------------
------
-----------
--------
------ ------- -
------ -
------ ------
--
-------- -
----------- -- -
-------------------------- -----------
--
------------ ------- -
-------------------------- -------------------
-
-
-
---------
---- --- - ---
----------
------- ----- --------
-----------
--------
------ ------- -
------ -
------ ------
-
-
---------在父组件中，共享了 title 字段，并分别将 title 和 handleTitleChange 通过 props 和事件传递给子组件 1。在子组件 1 中，通过 props 接收 title 并在 input 和 handleClick 中触发 change-title 事件来更新 title。在子组件 2 中，通过 props 接收 title 并显示在模板中。
使用 Vue.$parent 和 Vue.$children
Vue.js 的每个实例都有一个 $parent 属性，可以用来访问它的父级实例。$children 属性是一个数组，包含它的所有子实例。通过这两个属性，可以在兄弟组件之间进行通信。
-- -------------------- ---- -------
---- --- ---
----------
-----
---------------------------------
---------------------------------
------
-----------
--------
------ ------------ ---- ----------------
------ ------------ ---- ----------------
------ ------- -
----------- -
-------------
------------
-
-
---------
---- --- - ---
----------
-----
------ ----------- -------------- ----------------------
------- --------------------------- --------------
------
-----------
--------
------ ------- -
--------- -
----- -- -
------ ------------------
-
--
-------- -
----------- -- -
------------------ - ----------
--
------------ ------- -
------------------ - ------------------
-
-
-
---------
---- --- - ---
----------
------- ----- --------
-----------
--------
------ ------- -
--------- -
----- -- -
------ ------------------
-
-
-
---------在子组件 1 和 2 中，使用 Vue.$parent 访问它们的父组件，并通过 this.$parent.title 设置和获取 title 数据。需要注意的是，使用 Vue.$parent 和 Vue.$children 只是在一些特殊情况下的最后解决方案，应避免过度使用。
跨级组件通信
跨级组件通信是指两个组件不处于同一级别，也不是父子关系，而是通过其他组件进行通信。Vue.js 支持使用 provide 和 inject，在祖先组件中提供数据，在后代组件中注入数据，从而实现跨级组件通信。
-- -------------------- ---- -------
---- ---- ---
----------
-----
-----------------------------
------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
----------- -
-----------
--
------- -- -
------ -
------ ------ ------
-
-
-
---------
---- --- ---
----------
------- ----- --------
-----------
--------
------ ------- -
------- ---------
-
---------在祖先组件中，通过 provide 方法来提供 title 数据。在子组件中，通过 inject 来注入 title 数据。需要注意的是，provide 和 inject 绑定并不是反应性的。这意味着，如果提供的数据在祖先组件中更新，注入的组件不会自动更新。
非父子组件通信
非父子组件通信是指没有明确的关系的两个组件之间进行通信。Vue.js 支持使用事件总线、Vuex 状态管理和 Vue Router。
事件总线
事件总线是指在Vue.js的全局事件系统中，通过 $on、$off 和 $emit 方法来实现任意两个组件之间的通信。创建一个 EventBus，可以在任何组件内引入它，并使用 $on 和 $emit 方法，实现组件间通信。
-- -------------------- ---- -------
-- -----------
------ --- ---- -----
------ ------- --- -----
-- -- -
------ -------- ---- ------------
------ ------- -
-------- -
----------- -- -
------------------------------ --- -------
-
-
-
-- -- -
------ -------- ---- ------------
------ ------- -
---- -- -
------ -
------ ------ ------
-
--
------- -- -
---------------------------- -------- -- -
---------- - --------
--
-
-在这个例子中，创建了一个 EventBus，用于组件间通信。在组件 1 中通过 EventBus.$emit 触发 change-title 事件，并传递 'Hi World' 作为新的 title；在组件 2 中通过 EventBus.$on 监听 change-title 事件，并在回调函数中更新 title 字段。
Vuex 状态管理
Vuex 是 Vue.js 的状态管理库，它使用集中式 Store 来管理应用的所有状态，并提供了一些 API 来实现组件间通信。
-- -------------------- ---- -------
-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
------ ------ ------
--
---------- -
----------- ------- --------- -
----------- - --------
-
-
--
------ ------- -----
-- -- -
------ - ------------ - ---- ------
------ ------- -
-------- -
---------------------------------
----------- -- -
-------------------- -------
-
-
-
-- -- -
------ - -------- - ---- ------
------ ------- -
--------- -------------------
-在这个例子中，通过创建一个 Vuex Store，用于管理应用的状态。在组件 1 中通过 mapMutations 将 changeTitle 映射为组件的一个方法，并在 handleClick 中调用此方法来更新 title。在组件 2 中通过 mapState 将 title 映射为组件的一个计算属性，并在模板中使用它。
Vue Router
Vue Router 是 Vue.js 的官方路由库，它提供了一些 API 来实现路由组件之间的通信。
-- -------------------- ---- -------
-- -- -
------ ------- -
-------- -
----------- -- -
-------------------
----- --------------
------ - ------ --- ------ -
--
-
-
-
-- -- -
------ ------- -
------- -- -
----- ----- - -----------------------
---------- - -----
--
---- -- -
------ -
------ --
-
-
-在这个例子中，通过在组件 1 中使用路由跳转向组件 2 传递 title 数据，并使用 $route.query 来获取 title 数据，并在组件 2 中使用 title 数据。
总结
本文介绍了 Vue.js 中四种不同的组件间通信设计模式，包括父子组件通信、兄弟组件通信、跨级组件通信和非父子组件通信。Vue.js 的组件通信非常灵活多样，可以根据实际情况选择最适合的方式进行通信。在如何选择通信方式的时候，需要根据具体需求权衡优缺点，找到最佳的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486db5248841e989457271c