06. 引用

用来访问 html 的 dom 或者 子组件实例

3.5+ 使用 useTemplateRef：

<script setup>
import { useTemplateRef, onMounted } from 'vue'
 
// 第一个参数必须与模板中的 ref 值匹配
const input = useTemplateRef('my-input')
 
onMounted(() => {
  input.value.focus()
})
</script>
 
<template>
  <input ref="my-input" />
</template>

3.5 之前：
1.在元素上使用 ref：<input ref="input">
2.在 script 中声明一个同名 ref：

<script setup>
import { ref, onMounted } from 'vue'
 
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
 
onMounted(() => {
  input.value.focus()
})
</script>
 
<template>
  <input ref="input" />
</template>

NOTE

ref 还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：<input :ref="(el) => { ... }">