一、介绍
-
ref是一个特殊的属性，用于给元素或组件指定一个唯一的标识符。它可以在模板中直接使用。
-
$refs是一个普通对象，用于直接访问模板中的DOM元素或子组件。通过使用ref属性给元素或组件指定一个唯一的标识符，然后可以在JavaScript代码中使用this.$refs来访问它们。
对于DOM元素，使用refs可以获取元素的实例，并对其进行操作。对于子组件，使用refs可以获取子组件的实例，并调用其方法或访问其数据。
二、使用
1、访问DOM元素
获取某些元素的value，我常常会使用Jquery或js
使用Jquery
$("#id").text() // 使用Jquery
使用原生js
document.getElementById("id") // 使用原生Dom
使用$refs
<input ref="id" type="text" />
this.$refs.id //VUE中获取input值
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref 属性。
2、访问子组件
在模板中使用标签或自定义组件时，可以给组件添加ref属性
在这个例子中，我们给子组件设置了引用名myChild。通过this.$refs.myChild，我们可以访问这个子组件的实例，并调用其方法或访问其数据。
<template>
<child-component ref="myChild"></child-component>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myChild); // 输出： [Component]
},
}
</script>
需要注意的是，$refs只能在组件渲染完成之后访问，因为在渲染过程中，元素和组件可能还没有准备好。因此，通常在生命周期钩子函数中访问$refs是不安全的。
扫描二维码关注公众号，回复： 17134964 查看本文章