useTemplateRef() 获取模板引用（3.5+ 推荐写法）

最后更新：2026-10-22

useTemplateRef() 用字符串键取同名 ref 属性的模板引用，省去“声明一个同名变量”的样板代码。

📝 语法

const inputEl = useTemplateRef('my-input')

// 模板：<input ref="my-input">

key	与模板 ref 属性值一致的字符串

返回值：只读的 ref，挂载前为 null

修改下面的代码，在预览区实时查看效果：

输出：

点按钮后输入框获得焦点（光标闪烁）。

💡 提示 3.5+ 推荐写法；旧写法（同名 ref 变量 + 自动收集）仍完全可用。

⚠️ 注意 挂载前值为 null：访问前判空，或放到 onMounted 之后使用。

ℹ️ 说明 在 v-for 里会得到组件/元素数组。

更多案例即将上线。

Q 和直接声明同名 ref 变量的区别？

A 功能相同；useTemplateRef 无需同名约束、语义更明确，适合多引用场景。

Q 能取子组件实例吗？

A 能，指向组件实例；要调用其方法需在子组件 defineExpose 暴露。

Q 3.5 以下怎么办？

A 用经典写法：const txt = ref(null) 且模板 ref="txt"（编译期自动收集）。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。