在 Vue.js 中，组件是构建页面的基本单位。它们可以依赖于其他组件，并且与父级和子级传递数据。这种组件之间的数据传递非常常见，并且是构建复杂应用的必要部分。在本文中，我们将深入介绍 Vue.js 中组件之间传递数据的不同方法，并为您提供实际的示例代码。
父组件通过属性向子组件传递数据
在 Vue.js 中，我们可以使用属性 props 将数据从父组件传递到子组件。父组件通过在子组件中声明 props 来指定传递的数据类型和名称。子组件可以访问传递的数据，并在其模板中使用它。
下面是一个简单的例子，在该例子中，我们将创建一个名为 taskComponent 的子组件，并在其内部引用父组件的数据：
-- -------------------- ---- -------
---- --- ---
----------
-----
--------------- ----------- -- ------ -------------- -----------------------------------
------
-----------
--------
------ ------------- ---- ---------------------
------ ------- -
----------- - ------------- --
------ -
------ -
------ -
- --- -- ------ ---------- ---------- ----- --
- --- -- ------ ---------- ---------- ---- --
- --- -- ------ -------- ---------- ----- -
-
-
-
-
---------
---- --------------------- ---
----------
-----
------ -------------- -------
----- ------------------ ------
------
-----------
--------
------ ------- -
------ -
--------- ------
-
-
---------在上面的示例代码中，我们在父组件的模板中使用了 v-for 和 :key，以遍历 tasks 数据并为每个任务创建一个 taskComponent 实例。然后，我们使用 :task-data 将 task 对象传递到子组件中。在子组件中，我们使用 props 声明了 taskData 属性的类型，并在其模板中使用这个属性。
子组件通过事件向父组件传递数据
在某些情况下，子组件需要向其父级组件传递数据。在 Vue.js 中，我们可以使用 emit() 函数触发从子组件传递到父组件的自定义事件。在父组件中，我们可以通过监听这些事件来捕获子组件中的数据。
下面是一个例子，在该例子中，我们将创建一个名为 taskComponent 的子组件，并在其内部引用父级组件的方法，并在用户点击任务时触发该方法：
-- -------------------- ---- -------
---- --- ---
----------
-----
--------------- ----------- -- ------ -------------- ----------------- --------------------------------------------------
------
-----------
--------
------ ------------- ---- ---------------------
------ ------- -
----------- - ------------- --
------ -
------ -
------ -
- --- -- ------ ---------- ---------- ----- --
- --- -- ------ ---------- ---------- ---- --
- --- -- ------ -------- ---------- ----- -
-
-
--
-------- -
--------------------- -
-------------- - ----
-
-
-
---------
---- --------------------- ---
----------
-----
------ -------------- -------
------- -----------------------------------
------
-----------
--------
------ ------- -
------ -
--------- ------
--
-------- -
-------------- -
--------------------------- --------------
-
-
-
---------在上面的示例代码中，我们在父组件中定义了一个名为 markAsCompleted 的方法，该方法接收一个任务对象，并将其标记为已完成。在子组件中，我们绑定了一个点击事件，并在用户单击完成按钮时触发 completeTask 方法。在此方法中，我们使用 $emit 函数触发了一个自定义事件 complete-task，并将任务对象作为参数传递给该事件。
在父组件中，我们通过监听 complete-task 事件并调用 markAsCompleted 方法来处理从子组件传递的任务对象。
使用 Vuex 状态管理库进行组件之间的通信
在一些较大的应用程序中，使用 props 和事件来管理组件之间的通信可能会变得乏味和复杂。这时，我们可以使用 Vue.js 中一个称为 Vuex 的状态管理库，它可以轻松管理应用程序中的共享状态。
在 Vue.js 应用程序中，Vuex 基于 store 概念来管理应用程序的状态。store 单一状态管理模式使得状态分散的应用程序更容易管理。在这种情况下，每个组件都可以从中读取状态，然后可以向 store 发出修改该状态的请求。
下面是一个简单的例子，在该例子中，我们将创建一个 store 对象，并将其用于管理一个名为 tasks 的状态。然后，我们将创建两个组件： TaskList 和 Task，在该组件中，我们将使用 Vuex 来管理共享的 tasks 状态：
-- -------------------- ---- -------
---- -- ----- -- ---
----------
-----
-----------------------
------
-----------
--------
------ --- ---- -----
------ ---- ---- ------
------ -------- ---- ----------------
-------------
----- ----- - --- ------------
------ -
------ -
- --- -- ------ ---------- ---------- ----- --
- --- -- ------ ---------- ---------- ---- --
- --- -- ------ -------- ---------- ----- -
-
--
---------- -
------------------- ----- -
----- ----- - ----------------------- -- ---- --- --------
---------------------------- - ----
-
-
--
------ ------- -
----------- - -------- --
------
-
---------
---- ------------ -- ---
----------
-----
----- ----------- -- ------ -------------- -------------------------
------
-----------
--------
------ ---- ---- ------------
------ ------- -
--------- -
------- -
------ -------------------------------- -- -------------
-
--
----------- - ---- -
-
---------
---- -------- -- ---
----------
-----
------ -------------- -------
------- -----------------------------------
------
-----------
--------
------ ------- -
------ -
--------- ------
--
-------- -
-------------- -
---------------------------------- --------------
-
-
-
---------在上面的示例代码中，我们首先在 store.js 文件中创建了一个名为 store 的 Vuex store 对象，并使用 state，mutations 等属性来管理 tasks 状态。
在 TaskList 组件中，我们使用 computed 属性从 store 中获取 tasks 的值并使用 v-for 指令为每个任务创建 Task 组件的实例。我们将 Task 组件的任务数据传递为 taskData 属性。
在 Task 组件中，我们使用 this.$store.commit() 方法来触发名为 completeTask 的 mutation。该 mutation 不仅将任务标记为已完成，而且还会更新 store 中的 tasks 状态。
结论
在 Vue.js 中，有多种方法可以在组件之间传递数据。您可以使用 props 属性和事件来完全控制该操作，也可以使用 Vuex 的状态管理库来简化这一过程。希望本篇文章能够对您介绍这些方法有所帮助，并为您提高日常前端开发工作中的效率做出一些指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f250baa44b36ee57656ff1