Vue3 模板引用 (ref)：操作 DOM 与子组件实例 从入门到精通

前言在 Vue 的数据驱动思想下我们通常通过修改数据来驱动视图更新避免直接操作 DOM。但在实际开发中总会遇到一些非 DOM 不可的场景比如获取输入框焦点、调用第三方库初始化画布、获取子组件的数据或方法等。这时候Vue 提供的模板引用ref就派上了用场。本文将带你系统学习 Vue3 中ref的核心用法、操作 DOM、获取/调用子组件实例、与reactive区别等知识点帮你彻底掌握模板引用写出更优雅的 Vue 代码。一、什么是模板引用 ref简单说ref是 Vue 提供的获取「真实 DOM 元素」或「子组件实例」的方式。它的核心作用获取原生 DOM 节点如 input、div、canvas获取子组件实例调用子组件方法、访问子组件数据配合生命周期函数执行 DOM 操作注意Vue3 中ref有两个含义响应式引用定义基础类型响应式数据模板引用获取 DOM / 子组件本文重点讲模板引用 ref二、基础用法获取并操作 DOM1. 使用步骤三步给元素添加ref名称在script setup中创建一个同名 ref 对象等 DOM 渲染后通过.value获取真实 DOM2. 实战获取 input 并自动聚焦template !-- 1. 给 DOM 添加 ref 属性 -- input typetext refinputRef placeholder自动聚焦 / /template script setup import { ref, onMounted } from vue // 2. 创建与 ref 同名的响应式变量 const inputRef ref(null) // 3. 在挂载完成后操作 DOM必须在 onMounted 中 onMounted(() { // 获取真实 DOMinputRef.value inputRef.value.focus() console.log(真实 DOM 元素, inputRef.value) }) /script✅关键点模板里的ref名称 script 里的变量名必须在onMounted生命周期后才能获取到 DOM访问方式ref对象.value三、进阶用法获取子组件实例调用方法/访问数据这是组件封装、组件通信的高频用法父组件可以通过ref获取子组件实例直接调用子组件方法、访问子组件数据。1. 子组件Child.vue必须用defineExpose暴露需要让父组件访问的内容Vue3 脚本 setup 默认封闭不暴露任何内容template div子组件内容{{ msg }}/div /template script setup import { ref } from vue // 子组件数据 const msg ref(我是子组件数据) // 子组件方法 const childFn () { alert(子组件方法被执行了) } // ✅ 必须暴露父组件才能获取 defineExpose({ msg, childFn }) /script2. 父组件使用template button clickcallChild调用子组件方法/button !-- 给子组件添加 ref -- Child refchildRef / /template script setup import { ref } from vue import Child from ./Child.vue // 子组件实例引用 const childRef ref(null) const callChild () { // 调用子组件方法 childRef.value.childFn() // 访问子组件数据 console.log(子组件数据, childRef.value.msg) } /script✅核心规则子组件必须用defineExpose暴露属性/方法父组件通过ref.value.xxx调用不要滥用能通过 props / emit 实现就不用 ref四、v-for 中的多个 ref 批量获取 DOMv-for循环生成的元素不能用单个 ref必须用函数 ref或数组 ref。实战批量获取列表 DOMtemplate ul li v-foritem in list :keyitem :refsetItemRef {{ item }} /li /ul /template script setup import { ref, onMounted } from vue const list ref([1, 2, 3, 4, 5]) // 存放所有 DOM 引用 const itemRefs ref([]) // 函数 ref自动把 DOM 推入数组 const setItemRef (el) { if (el) { itemRefs.value.push(el) } } onMounted(() { console.log(所有 li DOM, itemRefs.value) }) /script五、重要注意事项必看避免踩坑1. 访问时机不能在setup同步代码中直接访问必须在onMounted事件处理函数click 等nextTick2. 访问方式DOM / 组件实例 ref值.value不能直接用ref值3. 子组件必须暴露script setup的组件默认封闭必须用defineExpose暴露方法和数据4. 不要滥用能通过数据驱动就不操作 DOM能通过 props/emit 就不调用子组件实例六、常见面试题1. ref 和 reactive 的区别ref用于基础类型string/number/boolean DOM 引用reactive用于引用类型对象/数组2. 为什么要在 onMounted 中获取 ref因为 setup 执行时DOM 还没渲染必须等挂载完成。3. 父组件如何调用子组件方法子组件defineExpose父组件用ref获取实例ref.value.方法名()七、总结模板 ref 获取 DOM / 子组件实例用法ref名称→ 定义同名 ref →onMounted使用操作 DOMref.value.focus()等子组件必须defineExpose暴露v-for使用函数 ref批量存储结语模板引用ref是 Vue3 必备核心技能尤其在表单操作、第三方库集成、组件封装中高频使用。只要记住数据驱动优先ref 辅助就能写出规范、高效、易维护的代码。