refs 在 vue 3 中用于访问组件实例或其子组件的 dom 元素或其他属性。具体使用步骤包括：声明 ref 变量：ref 属性声明一个变量，用于存储对 dom 元素或其他属性的引用。在模板中使用 ref：指定要引用的 dom 元素或其他属性。访问 ref 变量：在组件实例中，使用 this.$refs 对象访问声明的 ref 变量。
Vue 3 中的使用 Refs
什么是 Refs？
Refs 是 Vue 3 中一种特殊的属性，允许您访问组件实例或其子组件的 DOM 元素或其他属性。
如何使用 Refs？
立即学习“前端免费学习笔记（深入）”；
在 Vue 3 中使用 Refs，需要以下步骤：
-
声明 Ref 变量：使用
ref属性声明一个变量，它将用于存储对 DOM 元素或其他属性的引用。 -
在模板中使用 Ref：在 HTML 模板中，使用
ref属性指定要引用的 DOM 元素或其他属性。 -
访问 Ref 变量：在组件实例中，可以使用
this.$refs对象访问声明的 Ref 变量。
示例：
以下是一个在 Vue 3 中使用 Refs 的示例：
<code class="html"><template>
<input type="text" ref="inputText" />
</template>
<script>
export default {
mounted() {
// 访问 ref 变量
this.$refs.inputText.focus();
}
}
</script></code>在这个示例中：
-
ref="inputText"声明了对文本输入框元素的 Ref。 -
this.$refs.inputText在mounted生命周期钩子中获取对元素的引用。
高级用法：
除了访问 DOM 元素外，Refs 还可用于：
- 访问组件实例的方法和属性。
- 获取对模板内的特定插槽的引用。
- 访问自定义指令提供的实例。
通过使用 Refs，您可以更灵活地与组件及其 DOM 元素进行交互，实现更复杂的应用场景。
