ref 模板引用
最后更新：2026-10-22
ref 模板引用
ref 属性为元素或组件打上引用名，脚本中通过 $refs 或组合式 ref()/useTemplateRef() 访问。
| 分组 | 内置组件与元素 |
|---|---|
| 类型 | 特殊属性 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<input ref="inp">
<child-comp ref="child"></child-comp>⚙️ 参数
| props | 字符串名（组合式同名变量会自动收集）；v-for 中为数组 |
|---|
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
页面加载后输入框自动获得焦点。💡 要点
ℹ️ 说明 组合式 API：声明 const inp = ref(null) 后模板写 ref="inp" 即可自动收集（3.5 起推荐 useTemplateRef）。
⚠️ 注意 挂载前值为 null：访问前判空或放到 onMounted。
💡 提示 优先用数据与事件驱动，ref 直操作 DOM 只在必要时使用（聚焦、测量、第三方库挂载）。
🏷️ 相关内置组件与元素
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q ref 和响应式 ref() 冲突吗？
A 不冲突：模板 ref 是标记，ref() 是响应式 API，组合式里同名即自动关联。
Q 能引用多个元素吗？
A v-for 里的 ref 收集为数组（顺序不保证）。
Q 什么时候不该用？
A 能用状态与事件表达的逻辑就不用 ref，保持数据驱动。
