Vue.js 是当前非常流行的前端框架之一，它提供了良好的组件化开发支持，使得将一个复杂的应用拆分成多个组件来实现变得非常简单。但是组件之间的通信却是一个需要谨慎处理的问题，本文将介绍 Vue.js 中组件通信的三种方式，并探讨它们的使用场景以及优缺点。
1. 父子组件通信：props 和 emit
父组件向子组件传递数据可以使用 props，子组件向父组件传递数据可以使用 emit。这是 Vue.js 最基础的组件通信方式。
1.1 props
props 是将数据传递到子组件的最简单的方式，例如：
-- -------------------- ---- -------
---- --- ---
----------
---------------- -----------------------------------
-----------
--------
------ ------- -
------ -
------ -
---------- ------- ----- -----------
-
--
---
-
---------
---- --- ---
----------
------- --- --------
-----------
--------
------ ------- -
------ --------
---
-
---------这里使用 props 将 parentMsg 数据传递到了 child-component 中，并在子组件中使用 {{ msg }} 显示该数据。
1.2 emit
emit 是将数据从子组件传递到父组件的方式，例如：
-- -------------------- ---- -------
---- --- ---
----------
---------------- ----------------------------------------------
-----------
--------
------ ------- -
------ -
------ -
---------- --
-
--
-------- -
-------------------- -
-------------- - ----
-
--
---
-
---------
---- --- ---
----------
------- -----------------------------------------
-----------
--------
------ ------- -
-------- -
---------------- -
----------------------- ------- ------ ------------
-
--
---
-
---------这里使用 emit 将数据从 child-component 中传递到 parent-component，并在父组件中使用 handleSendData 方法接收该数据。
2. 非父子组件通信：$emit 和 $on
除了父子组件之间的通信，如果需要在没有父子关系的组件之间进行通信，可以使用 $emit 和 $on。
2.1 $emit
$emit 是将数据从一个组件中传递到它的父组件，但不是直接父组件，而是触发事件的组件的父组件。
-- -------------------- ---- -------
---- ------- ---
----------
------- -----------------------------------------
-----------
--------
------ ------- -
-------- -
---------------- -
----------------------- ------- ---------- ------------
-
--
---
-
---------这里使用 $emit 将数据从触发事件的组件传递到了它的父组件，并通过 send-data 事件触发：
-- -------------------- ---- -------
---- --- ---
----------
------- --------- --------
-----------
--------
------ ------- -
------ -
------ -
---------- --
-
--
--------- -
--------------------- ------ -- -
-------------- - ----
--
--
---
-
---------在父组件中使用 $on 监听 send-data 事件，并在回调函数中接收数据。
2.2 $emit 和 $on
如果两个非父子关系的组件需要相互通信，可以使用 $emit 和 $on。
-- -------------------- ---- -------
---- -- - ---
----------
------- --- --------
-----------
--------
------ ------- -
------ -
------ -
---- --
-
--
--------- -
--------------------- ------ -- -
-------- - ----
--
--
-------- -
------------- -
----------------------- ------- --------- ----
-
-
-
---------
---- -- - ---
----------
------- --- --------
-----------
--------
------ ------- -
------ -
------ -
---- --
-
--
--------- -
--------------------- ------ -- -
-------- - ----
--
--
-------- -
------------- -
----------------------- ------- --------- ----
-
-
-
---------这里两个组件都使用了 $on 监听 send-data 事件，并在接收到数据时更新自己的 msg。当组件 A 的 handleClick 被调用时，它使用 $emit 将数据 'Hello, component B!' 发送给组件 B；组件 B 同理。
3. Vuex 状态共享
如果组件之间存在比较复杂的状态共享情况，可以考虑使用 Vuex。Vuex 是 Vue.js 的状态管理库，它实现了一个单向数据流，在全局共享一个数据仓库。
例如：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
---- --
--
---------- -
---------------- ---- -
--------- - ---
-
--
-------- -
----------- ------ -- ---- -
------------------- ----
-
--
-------- -
------------- -
------ ---------
-
-
--
------ ------- -----这里定义了一个名为 msg 的状态，并提供了 updateMsg 的 mutation，msgUpdate 的 action 和 getMsg 的 getter。
在任意组件中都可以使用 this.$store 来访问该仓库，并通过 this.$store.commit('updateMsg', 'Hello, Vuex!') 更新状态，通过 this.$store.getters.getMsg 获取状态。
总结
本文介绍了 Vue.js 中组件通信的三种方式：父子组件通信（props 和 emit）、非父子组件通信（$emit 和 $on）、Vuex 状态共享。在实际开发中，需要根据不同的场景选择合适的方式来完成组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab710248841e98947459f5