$refs 模板引用集合

最后更新：2026-10-22

$refs 保存模板里 ref 属性标记的元素或组件实例：脚本里借此访问 DOM 或调用子组件方法。

📝 语法

export default {
  mounted() {
    this.$refs.input.focus()
  }
}

value	无参数：读取属性，键为模板 ref 名

返回值：元素或组件实例（挂载前为 null；v-for 中为数组）

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

输出：

页面加载即聚焦输入框；点按钮再次聚焦。

⚠️ 注意 $refs 不是响应式的：不要把它写进模板或 computed。

ℹ️ 说明 v-for 里的 ref 得到数组，且顺序不保证与数据顺序一致。

💡 提示 组合式 API 用 ref()/useTemplateRef() 替代，作用域更清晰。

更多案例即将上线。

Q 为什么 mounted 前是 undefined？

A DOM 尚未创建，引用还没赋值。

Q 能访问子组件的数据吗？

A 仅当子组件 exposed（默认全部暴露；defineExpose 可限制）。

Q 能替代事件通信吗？

A 不推荐：父调子方法破坏封装，优先 props/emits 与 provide。

Web-Tutorial 技术团队

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