在 Vue.js 中，组件是一个非常强大的设计模式，它能够将界面分解成多个独立的、可复用的部分。但是，在实际开发中，组件之间的通信是一个必须要解决的问题。
Vue.js 提供了多种组件传值的方式，可以根据具体场景和需求来选择不同的传值方式。
父组件向子组件传值
父组件向子组件传值是经典的数据流动方式，它能够将父组件中的数据传递到子组件中，可以通过以下两种方式实现。
Props
Props 只能从父组件传递到子组件，通过定义 props 可以将父组件中的属性传递给子组件。
父组件中的代码：
-- -------------------- ---- -------
----------
------ -------------------------
-----------
--------
------ ----- ---- -------------
------ ------- -
----- ---------
----------- -
-----
--
------ -
------ -
------ ------- -------
-
-
-
---------子组件中的代码：
-- -------------------- ---- -------
----------
------- ------- --------
-----------
--------
------ ------- -
----- --------
------ -
-------- -
----- -------
--------- ----
-
-
-
---------在父组件中，使用<child>标签将子组件声明，通过:message指令将hello属性传递给子组件，子组件中通过 props 定义的message属性即可获取该值。
$refs
Refs 可以获取子组件的实例，从而可以直接访问子组件中的属性和方法。
父组件中的代码：
-- -------------------- ---- -------
----------
------ --------------------
-----------
--------
------ ----- ---- -------------
------ ------- -
----- ---------
----------- -
-----
--
--------- -
-------------------------------------
-
-
---------子组件中的代码：
-- -------------------- ---- -------
----------
------- ------- --------
-----------
--------
------ ------- -
----- --------
------ -
------ -
-------- ------- -------
-
-
-
---------在父组件中，使用<child>标签将子组件声明，并添加ref属性设置引用名称为child，在mounted钩子函数中即可通过this.$refs.child获取子组件实例，从而访问子组件中的message属性。
子组件向父组件传值
子组件向父组件传值通常是通过事件的方式实现，可以通过以下两种方式实现。
$emit
$emit 是 Vue.js 实例的一个方法，可以在子组件中使用，它可以触发一个事件并传递参数给父组件。
子组件中的代码：
-- -------------------- ---- -------
----------
------- ------------------------- ----------------
-----------
--------
------ ------- -
----- --------
-------- -
------------- -
--------------------- ------- --------
-
-
-
---------父组件中的代码：
-- -------------------- ---- -------
----------
------ ----------------------------------
-----------
--------
------ ----- ---- -------------
------ ------- -
----- ---------
----------- -
-----
--
-------- -
----------------------- -
--------------------
-
-
-
---------在子组件中，使用$emit方法触发事件并传递参数，父组件中使用@message监听该事件，并执行对应的方法。
$parent
$parent 是 Vue.js 实例的一个属性，可以在子组件中使用，它可以直接访问父组件中的属性和方法。
子组件中的代码：
-- -------------------- ---- -------
----------
------- ------------------------- ----------------
-----------
--------
------ ------- -
----- --------
-------- -
------------- -
----------------------------------- --------
-
-
-
---------父组件中的代码：
-- -------------------- ---- -------
----------
---------------
-----------
--------
------ ----- ---- -------------
------ ------- -
----- ---------
----------- -
-----
--
-------- -
----------------------- -
--------------------
-
-
-
---------在子组件中，通过this.$parent访问父组件实例，并调用父组件中的方法。
总结
在 Vue.js 中，组件传值是一个非常重要的概念，通过上面的介绍，我们可以了解到多种组件传值的方式。在实际开发中，可以根据具体场景和需求来选择不同的传值方式，以达到最优的效果。
通过以上的示例代码，我们也可以更好的理解和掌握 Vue.js 中组件传值的方式，希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64689a71968c7c53b08c8f98