Vue.js 是一款流行的前端框架，它有着许多优秀的特性。其中，组件化开发是 Vue.js 最为重要的一项特性之一，也是使得 Vue.js 得以快速开发 Web 应用程序的重要因素。在组件化开发的过程中，父子组件之间的传值是十分常见的需求。本文将详解 Vue.js 父子组件之间的传值方式，并提供相应的示例代码。
父组件向子组件传值
在 Vue.js 中，父组件向子组件传值的方式有两种：props 和 $emit，下面我们将分别介绍这两种方式的实现。
props
props 是 Vue.js 中专门用于从父组件向子组件传递数据的属性，其使用方式如下：
在父组件中，我们可以通过 v-bind 指令向子组件传递数据，例如：
-- -------------------- ---- -------
----------
------ -----------------------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- ------- -----
-
-
-
---------在子组件中，我们可以通过 props 属性接收父组件传递来的数据，例如：
-- -------------------- ---- -------
----------
------- --- --------
-----------
--------
------ ------- -
------ -
---- -
----- -------
--------- ----
-
-
-
---------$emit
在 Vue.js 中，父组件可以通过 $emit 方法触发一个子组件中自定义的事件，并传递相应的数据，如下所示：
在父组件中，我们可以调用子组件中定义的自定义事件，并传递数据，例如：
-- -------------------- ---- -------
----------
-----
------ ----------------------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- --
-
--
-------- -
--------------- -
------------ - ---
-
-
-
---------在子组件中，我们需要使用 $emit 方法触发一个自定义的事件，并将数据传递给父组件，例如：
-- -------------------- ---- -------
----------
-----
------- ------------------------- -----------
------
-----------
--------
------ ------- -
-------- -
------------ -
------------------------- ------- ------
-
-
-
---------子组件向父组件传值
在 Vue.js 中，子组件向父组件传值的方式有两种：$emit 和 $parent，下面我们将分别介绍这两种方式的实现。
$emit
与父组件向子组件传值相反，子组件也可以通过 $emit 方法触发一个父组件中自定义的事件，并传递相应的数据，如下所示：
在父组件中，我们需要在子组件标签上注册一个自定义事件，并在相应的方法中接收子组件传递过来的数据，例如：
-- -------------------- ---- -------
----------
-----
------ ----------------------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- --
-
--
-------- -
--------------- -
------------ - ---
-
-
-
---------在子组件中，我们需要使用 $emit 方法触发一个自定义的事件，并将数据传递给父组件，例如：
-- -------------------- ---- -------
----------
-----
------- ------------------------- -----------
------
-----------
--------
------ ------- -
-------- -
------------ -
------------------------- ------- ------
-
-
-
---------$parent
在 Vue.js 中，每个组件都有 $parent 属性，它指向该组件的父组件，因此在子组件中可以通过 $parent 属性访问父组件的数据或方法。
在父组件中，我们需要定义一个方法，让子组件可以调用该方法，并将数据传递给父组件，例如：
-- -------------------- ---- -------
----------
-----
---------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- --
-
--
-------- -
--------------- -
------------ - ---
-
-
-
---------在子组件中，我们需要通过 $parent 属性访问父组件的方法，并将数据传递给父组件，例如：
<template>
<div>
<button @click="$parent.setMessage('Hello, Vue!')">Click Me</button>
</div>
</template>总结
通过以上的介绍，我们可以知道在 Vue.js 中，父子组件之间通过 props 和 $emit 方法以及 $parent 属性可以灵活地实现数据的传递。在实际开发中，需要根据业务需求选择合适的传值方式。
示例代码：
-- -------------------- ---- -------
---- ---------- ---
----------
-----
------ -------------- ----------------------------------
------- --------------------------------- ------- ---- ---------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- --
-
--
-------- -
--------------- -
------------ - ---
--
---------------------- -
---------------------------------------------- ---- --------
-
-
-
----------- -------------------- ---- -------
---- --------- ---
----------
-----
------------ ---- ------- -- ----------------- --------
------------ ---- ------ -- ---------------- --------
------
-----------
--------
------ ------- -
------ -
---- -
----- -------
--------- ----
-
--
------ -
------ -
----------------- ---
------------------ --
-
--
-------- -
------------------------- -
---------------------- - ---
--
--------------------- -
--------------------- - -------- ---- ------
------------------------- ----------------------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538e0687d4982a6eb20406d