在前端开发中，经常会遇到组件化的需求，而在 Vue.js 中，组件化扮演着至关重要的角色。Vue.js 的组件化是将一个页面拆分成多个独立的部分，每个部分拥有自己独立的逻辑、数据和样式等属性。那么，在 Vue.js 中，如何进行父子组件间的数据传递呢？本文将探讨 Vue.js 中的父子组件数据传递问题。
Prop 和 $emit
在 Vue.js 中，父组件通过 prop 属性向子组件传递数据，子组件则通过$emit 发射一个自定义事件来将自身的数据传递回父组件。具体实现过程如下：
父组件传递数据给子组件
在父组件中，我们可以通过 v-bind 绑定 prop 的值，并在子组件中声明该 prop 属性。
-- -------------------- ---- -------
---- --- ---
----------
-----
---------------- -----------------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------------
--------------
--
-------
-------
----------- ------ ------
-
-
-
---------
---- --- ---
----------
-----
-------------------
------
-----------
--------
------ ------- -
-------
--------- ------
-
-
---------在父组件中，我们可以通过 v-bind 指令将 parentData 传递给子组件，即 :propName="parentData"，而在子组件中，我们可以在 props 中声明 propName 属性。这样，子组件就可以通过{{propName}}渲染出父组件传递过来的数据。
子组件将数据传递回给父组件
在子组件中，我们可以通过$emit 方法发射一个自定义事件，并将子组件的数据作为参数传递给父组件。在父组件中，我们可以通过 @eventName 监听该事件，并在事件处理函数中获取到子组件传递过来的数据。
-- -------------------- ---- -------
---- --- ---
----------
-----
------- ----------------------- ------------
------
-----------
--------
------ ------- -
-------
-------
---------- ------ ----
-
--
---------
-----------
------------------------ ---------------
-
-
-
---------
---- --- ---
----------
-----
---------------- ---------------------------------------------
---------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------------
--------------
--
-------
-------
----------- --
-
--
---------
------------------
--------------- - ---
-
-
-
---------在子组件中，我们通过 $emit 方法发射一个自定义事件，此处事件名为 child-name，参数为 this.childData。在父组件中，我们通过 @child-name 监听该事件，并调用 getChildData 方法，将子组件传递过来的数据保存到 parentData 中，从而实现了数据的传递。
$parent 和 $children
除了以上介绍的方法，Vue.js 还提供了 $parent 和 $children 属性，用于实现父子组件间的数据传递。
$parent 访问父组件
在子组件中，我们可以通过访问 $parent 属性来获得父组件实例，并对其数据进行操作。例如：
-- -------------------- ---- -------
---- --- ---
----------
-----
-----------------------------------
--------- ----- ------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------------
--------------
--
-------
-------
----------- ------ ------
-
-
-
---------
---- --- ---
----------
-----
------- -------------------------------- ------ -------------
------
-----------
--------
------ ------- -
---------
-------------------
----------------------- - ------ ----
-
-
-
---------在子组件中，我们可以通过 $parent 属性访问到父组件实例，并对其数据进行操作。此处，我们在子组件中通过 $parent 访问到了 parentData 的值，并将其修改为 'Hello Vue'。
$children 访问子组件
在父组件中，我们可以通过访问 $children 属性来获得所有子组件实例，并对其数据进行操作。例如：
-- -------------------- ---- -------
---- --- ---
----------
-----
---------------- ------------- ------ -- --------- -------------------------------
------- ------------------------------- ----- -------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------------
--------------
--
-------
-------
--------- -
- ----- ------ ---- -- --
- ----- -------- ---- -- -
-
-
--
---------
------------------
---------------------------- -- -
--------- -- -
--
-
-
-
---------
---- --- ---
----------
-----
----------- -- ------- ----- --------
------
-----------
--------
------ ------- -
-------
----- -------
---- ------
-
-
---------在父组件中，我们可以通过 $children 属性获得所有子组件实例的数组，并对其数据进行操作。此处，我们在父组件中通过 $children 访问到了所有子组件实例，并将他们的年龄加一。注意，此处需要在子组件中声明 name 和 age 属性，并通过 v-for 指令进行遍历。
computed 和 watch
除了以上介绍的方法，Vue.js 还提供了 computed 和 watch 两个属性来实现父子组件间的数据传递。
computed 计算属性
computed 计算属性通常用于重复使用的计算，而且会缓存计算结果。在子组件中，我们可以通过计算属性访问父组件的数据，并在计算过程中对其进行处理。例如：
-- -------------------- ---- -------
---- --- ---
----------
-----
-----------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------------
--------------
--
-------
-------
----------- --
-
-
-
---------
---- --- ---
----------
-----
--------- ----- ------------------
----------- ----- --------------------
------
-----------
--------
------ ------- -
----------
---------------
------ ----------------------- - -
-
-
-
---------在子组件中，我们通过 computed 计算属性访问到了父组件的 parentData，并对其加上了一个固定值 5，最终得到 computedData 的值。
watch 监听属性
watch 监听属性通常用于响应数据的变化。在父组件中，我们可以通过 watch 监听子组件传递过来的数据，并对其进行处理。例如：
-- -------------------- ---- -------
---- --- ---
----------
-----
---------------- -----------------------------------------
--------- ----- ------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
------------
--------------
--
-------
-------
----------- --
-
--
-------
----------------
----------------------- ---------- ----
-
-
-
---------
---- --- ---
----------
-----
------- -------------------------- -------------
------
-----------
--------
------ ------- -
-------
--------- ------
--
---------
-------------
------------------------ ------ -----
-
-
-
---------在父组件中，我们通过 watch 属性监听了 parentData 的变化，并在 console 中打印了新的值。而在子组件中，我们通过 $emit 方法将子组件的数据 'Hello Vue' 传递给父组件。
总结
本文详细介绍了 Vue.js 中父子组件数据传递的各种方法，包括 Prop 和 $emit、$parent 和 $children、computed 和 watch。不同的方法具有不同的使用场景和优缺点。在实际开发中，需要根据具体情况选择合适的方法进行数据传递。同时，本文提供了代码示例，可以供开发者进行实战练习，加深对 Vue.js 父子组件数据传递的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d497895b1f8cacd4d697b