在 Vue 的声明式编程世界里，我们大部分时间都在操作数据。但总有一些时刻，我们需要“越级”直接去碰一下真实的 DOM 元素，或者去调用子组件里的方法。这时候，ref 属性就是你的“直连电线”。
一、 什么是模板引用（Ref）？
简单来说，ref 是 Vue 提供的一个特殊属性，允许我们在模板（HTML）中为某个元素或子组件注册一个引用信息。
- 作用在原生 HTML 标签上： 获取的是 DOM 元素。
- 作用在组件标签上： 获取的是 组件实例对象。
二、 基础用法：操作 DOM 元素
想象一个场景：页面加载后，你需要让某个输入框自动获取焦点。
<script setup lang="ts">
import { ref, onMounted } from 'vue'// 1. 创建一个名为 inputRef 的响应式变量，初始值为 null
const inputRef = ref(null)onMounted(() => {// 3. 当组件挂载完成后，inputRef.value 就会指向真正的 DOM 节点console.log(inputRef.value) // 打印出 <input ...>inputRef.value.focus() // 调用原生的 focus 方法
})
</script><template><input ref="inputRef" type="text" placeholder="我会自动聚焦" />
</template>三、 进阶用法：操作子组件
这是 ref 最强大的地方，你可以从父组件直接“指挥”子组件。
1. 子组件 (Child.vue)
在 <script setup> 中，组件默认是封闭的。如果希望父组件能访问，必须用 defineExpose 暴露出来。
<script setup lang="ts">
import { ref,defineExpose } from 'vue'
const count = ref(100)
const sayHello = () => console.log('Hello from Child!')// 关键：暴露给外面
defineExpose({count,sayHello
})
</script>2. 父组件 (App.vue)
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'const childRef = ref(null)const getChildData = () => {// 访问子组件暴露的数据console.log(childRef.value.count)// 调用子组件暴露的方法childRef.value.sayHello()
}
</script><template><Child ref="childRef" /><button @click="getChildData">获取子组件信息</button>
</template>四、 避坑指南
1. 变量名必须对齐
模板里的 ref="xxx" 必须和脚本里的 const xxx = ref() 名字完全一致，否则 Vue 不知道要把引用塞给哪个变量。
2. 不要过早访问
错误示范： 在 setup 的顶层直接打印 myRef.value。
原因： 此时模板还没渲染，DOM 还没生成，拿到的绝对是 null。必须在 onMounted 或事件回调函数中访问。
3. 不要滥用
虽然 ref 很好用，但不要把它当成“数据传输”的主要手段。
- 父传子： 用
props。 - 子传父： 用
emits。 - 只有当你需要调用组件特定方法或处理第三方库 DOM 时，才考虑
ref。
五、 总结
| 特性 | HTML 标签 | 组件标签 |
|---|---|---|
ref 拿到了什么 |
真实的 HTML DOM 元素 | 组件的实例对象 |
| 前提条件 | 直接绑定即可 | 子组件需显式 defineExpose |
| 常用场景 | 焦点控制、动画、集成插件 | 调用子组件方法、读取内部状态 |