在 Vue.js 中，我们经常会遇到需要在父组件中调用子组件的方法的情况。一般情况下，我们可以通过向子组件添加 ref 属性，然后在父组件中使用 this.$refs 来调用子组件中的方法。本文将详细介绍如何使用 $refs 解决 Vue.js 中父组件调用子组件方法的问题，以及如何正确地使用 $refs 来获取和操作 DOM 元素和组件。
什么是 $refs
在 Vue.js 中，$refs 是一个 Reactivity 响应式数据，它可以用来访问子组件实例或 HTML 元素，使得我们可以在父组件中操作子组件或 HTML 元素。$refs 应该只在需要直接操作子组件或 HTML 元素时使用，而不应该用于通信或组件之间的数据传递。
如何使用 $refs
假设我们有一个父组件 Parent，它包含一个子组件 Child。我们想要在 Parent 中调用 Child 中的方法或获取 Child 中的数据，可以通过在 Child 组件中添加 ref 属性来实现。例如：
----------
-----
------ ----------- --
------
-----------然后，我们可以在 Parent 中使用 this.$refs.child 来访问 child 组件的实例，从而可以调用 Child 中的方法或获取 Child 中的数据。例如：
------ ------- -
------- -- -
-----------------------------
-
-其中 someMethod() 是 Child 组件中的一个方法。
使用 $refs 获取和操作 DOM 元素和组件
除了用来调用子组件中的方法和获取数据以外，$refs 还可以用来获取和操作 DOM 元素和组件实例。例如，假设我们有一个包含以下 HTML 代码的组件：
----------
-----
------ -------------- --
------- --------------------------------------
------
-----------我们可以使用 $refs 来获取 input 元素，然后访问它的 value 属性：
------ ------- -
-------- -
------------- -
----- -------- - -------------------------
----------------------- ---------
-
-
-我们也可以使用 $refs 来获取组件实例，并且通过调用组件实例的方法来操作组件。例如，假设我们有一个自定义组件，需要手动调用其中的某个方法才能实现某个功能。我们可以这样做：
----------
-----
-------------------- --------------- --
------- --------------------------------------
------
----------------- ------- -
-------- -
------------- -
---------------------------------
-
-
-注意事项
在使用 $refs 时，需要注意以下几点：
- $refs 要在组件渲染完毕后才能访问，因此在访问 $refs 时需要确保组件已经渲染完毕。
- $refs 是一个响应式数据，因此当组件重新渲染时，$refs 可能会被更新，所以需要小心使用。
- 不要在 computed 中使用 $refs，因为 computed 的计算是惰性的，可能会导致 $refs 未被正确初始化。
结论
$refs 可以让我们在 Vue.js 中更方便地访问子组件实例和 DOM 元素，使得我们可以更轻松地操作这些元素。在使用 $refs 时，需要小心注意一些细节和注意事项。希望本文对你有所帮助！
示例代码：
----------
-----
------ ----------- --
------------- -----------------
------- -----------------------------------------------
------
-----------
--------
------ ----- ---- --------------------
------ ------- -
----------- -
-----
--
------ -
------ -
---------- --
-
--
-------- -
----------------- -
-------------- - ---------------------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b29feddd3a70eb6d1f1bf