在 Vue.js 中，组件通信是非常常见的需求。在组件之间传递数据，就需要使用 Vue.js 提供的 props 和 emit 两个 API，其中，父组件通过 props 将数据传给子组件，子组件通过 emit 事件，将数据传回给父组件。而在父子组件之间传递数据时，还需要考虑到数据类型、数据格式、数据状态等因素。
一、在子组件中获取父组件传过来的数据
子组件通过 props 来接收父组件传递过来的数据。例如，父组件传入一个 message 变量，子组件可以通过 props 来接收。
父组件：
----------
-----
------------- ------------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----------- - ----------- --
------ -
------ -
---- ------- --------
-
-
-
---------子组件：
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- ------
-
-
---------在子组件中，需要使用 props 属性来定义参数类型，以及通过定义 props 的 properties 来传递数据。在上面的例子中，如果父组件传递的数据不属于 String 类型，那么 Vue.js 会提示警告。
二、在子组件中实时响应父组件数据的变化
Vue.js 中，父子组件之间的数据传递是单向的。也就是说，如果父组件的数据发生了变化，那么子组件中并不能实时响应这个变化。如果需要实时响应，我们需要使用 Vue.js 提供的 computed 属性，以及 watch 属性。
如果我们需要在子组件中实时响应父组件传递的数据变化，可以通过 computed 属性来实现。例如，在下面的例子中，我们可以通过 computed 属性来监听父组件传递的 msg 变量的变化。
父组件：
----------
-----
------------- ------------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----------- - ----------- --
------ -
------ -
---- ------- --------
-
-
-
---------子组件：
----------
------- --- --------
-----------
--------
------ ------- -
------ -
-------- ------
--
--------- -
---- -------- -- -
------ ------------
-
-
-
---------在上面的代码中，我们定义了一个 computed 属性，用来监听父组件传递过来的 message 变量的变化。当父组件中的 msg 变量发生变化时，子组件中的 msg 属性也会自动更新，从而实现了实时响应的效果。
另外，如果需要在子组件中实时响应父组件传递的数据变化，我们还可以使用 watch 属性来实现。例如，在下面的例子中，我们可以通过 watch 属性来监听父组件传递的 msg 变量的变化。
父组件：
----------
-----
------------- ------------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----------- - ----------- --
------ -
------ -
---- ------- --------
-
-
-
---------子组件：
----------
------- --- --------
-----------
--------
------ ------- -
------ -
-------- ------
--
------ -
------ -
---- --
-
--
------ -
-------- -------- ---------- --------- -
-------- - --------
-
-
-
---------在上面的代码中，我们通过 watch 属性来监听父组件传递过来的 message 变量的变化，当其发生变化时，子组件中的 msg 属性也会自动更新，从而实现了实时响应的效果。
三、在子组件中通过 emit 事件向父组件传递数据
在 Vue.js 中，子组件通过 emit 事件向父组件传递数据。例如，在下面的例子中，当子组件中的按钮被点击时，就会触发一个名为 sendMsg 的自定义事件，同时传递了一个对象作为参数。
父组件：
----------
-----
------------- ------------------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----------- - ----------- --
-------- -
---------- -------- ----- -
----------------
-
-
-
---------子组件：
----------
-----
------- ------------------------------
------
-----------
--------
------ ------- -
-------- -
-------- -------- -- -
--------------------- - ---------- ------- -------- --
-
-
-
---------在上面的代码中，我们通过 $emit 方法来触发一个名为 sendMsg 的自定义事件，同时传递了一个对象作为参数。父组件中，我们通过 @sendMsg 来监听 sendMsg 事件，从而获取子组件中传递的数据。
四、总结
在 Vue.js 中，父子组件之间的数据传递是一个非常重要的应用场景。在开发过程中，我们需要根据具体需求，选择合适的传值方式，以及注意传值参数类型、状态等因素。本文介绍了 Vue.js 中的父子组件传值方式，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652ac5cf7d4982a6ebd002ac