Vue.js 是一种构建用户界面的渐进式框架，通过组件化开发进行模块化开发，组件之间的通信成为了一个很重要的问题。本文将详细介绍 Vue.js 组件通讯的相关知识，并提供实例代码以供参考。
父子组件的通讯
父子组件之间的通讯是最常见的场景。父组件可以向子组件传递数据，子组件可以通过事件的方式向父组件传递数据。
父组件向子组件传递数据
父组件向子组件传递数据的方式有两种：props 和 $attrs。
props
props 是一种从父组件向子组件传递数据的方式。在父组件中定义 props 就像定义一个对象一样，将属性和值作为对象的键值对传递给子组件。子组件通过 props 来接收父组件传递过来的数据。
---- --- ---
----------
---------------- -------------------------------------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------ -
------ -
-------- ------ ------
-
--
----------- -
--------------
-
-
---------
---- --- ---
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- ------
-
-
---------在子组件中声明 props 的时候，可以指定数据类型和默认值，代码如下：
------ -
-------- -
----- -------
-------- ------ -------
-
-$attrs
$attrs 是一种将父组件的所有属性全部传递给子组件的方式，通常用于需要将父组件的数据全部传递给子组件的场景。
---- --- --- ---------- ---------------- -------------- ------ -- ----------- ---- --- --- ---------- ------- -------------- -------- ----------- ---- ----- ------ -- --- - -------- ------ ------ -
子组件向父组件传递数据
子组件向父组件传递数据的方式是通过自定义事件，并通过 $emit 方法触发事件。
---- --- ---
----------
------- ----------------------------------
-----------
--------
------ ------- -
-------- -
------------- -
----------------------- ------ -------
-
-
-
---------
---- --- ---
----------
---------------- ----------------------- --
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
-------- -
---------------- -
----------------- -- ----- -----
-
--
----------- -
--------------
-
-
---------在子组件中使用 $emit 方法触发事件，第一个参数是事件名，第二个参数是要传递的数据。父组件通过在子组件上绑定事件名和事件方法，来接收来自子组件传递过来的数据。
非父子组件的通讯
非父子组件之间的通讯，是指不同层次的组件之间进行数据传递的方式。在 Vue.js 中，非父子之间的通讯主要有两种方式：事件总线和 Vuex。
事件总线
事件总线是一种在任何地方都可以发起事件和监听事件的机制，Vue.js 中有一个全局事件总线 Vue.prototype.$bus，可以通过这个事件总线在任何组件中传递数据。
-- ----------- ------ --- ---- ----- ----- --- - --- ----- ------ ------- ---
在需要传递数据的组件中引入 EventBus.js，并在组件中通过 $emit 触发一个事件。在接收数据的组件中绑定 $on 方法监听事件，代码如下：
-- ------- ------ --- ---- --------------- ---------------------- ------ ------- -- ------- ------ --- ---- --------------- -------------------- ------ -- - ----------------- -- ----- ----- --
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它使用了一个集中式的存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
在 Vuex 中，数据流是严格单向的，在 Vue.js 应用中的所有组件中，只有唯一的一个 store，并且 store 中的数据可以被任何组件访问和修改。
-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
-------- ------ ------
--
---------- -
-------------------- ----- -
------------- - ----
-
-
--
------ ------- -----在需要修改数据的组件中，通过 $store.commit 方法触发 mutation 来更新 store 中的数据。在需要访问数据的组件中，通过 $store.state.message 来获取数据，代码如下：
-- ----- -------- -- ----- ---- ------ ----- ---- ------------ ----------------------------- ------ ------ -- ----- ----- ---- ------ ----- ---- ------------ -------------------------------- -- ----- ----
总结
本文介绍了 Vue.js 组件通讯的几种方式，包括父子组件通讯和非父子组件通讯。在实际开发中，可以根据不同的场景选择不同的通讯方式来传递数据，从而更好地满足复杂应用程序的需求。
参考链接
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a9f54a48841e9894617e51