【vue3 $refs和特殊attr：ref 】获取子组件实例 & 规范获取Dom元素；（统称模板引用）

# ref （内置的特殊attribute）

• 预期值 string | Function

1. ref 用来给元素或子组件注册引用信息。注册内容会在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是那个 DOM 元素；如果用在子组件上，引用就指向组件实例！

2. 关于 ref 的重要说明：在初始化组件时你不能访问 ref 绑定的对应内容 ——它们还不存在！$refs 也是非响应式的，因此你不应该试图用它在模板中做数据绑定。

3. 尽管存在 prop 和事件，但有时你可能仍然需要在 JavaScript 中直接访问子组件。为此，可以使用 ref attribute 为子组件指定引用 ID。见 案例 2 或 3；

注意！由于vue工程项目是单页面应用，由多个组件组成的一个路由页面，也就意味着用原生DOM操作获取标签元素存在获取错误（拿到其他组件的同id、class等元素）的情况；

所以在vue里，采用 $refs + 元素 ref 值绑定来获取DOM元素的作为规范标准最合适。

 4 5种场景的代码示例：（没其他的了）

setup 里由于无法使用 $refs ，所以不像 options api 里用 `this.$refs.refName`来获取对应的绑定内容。

` :ref ` 传入函数的方式，对变量名没要求，符合规则即可。

` ref ` 传入 string 值的绑定方式，则是 const refName = ref(); 来获取。

必须在onMounted生命周期以及之后的生命周期里，才能拿到 ref 的绑定对象！

案例1、2的解释：

在使用组合式 API 时，响应式引用和模板引用的概念是统一的。为了获得对模板内元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回：

这里我们在渲染上下文中暴露 root，并通过 ref="root"，将其绑定到 div 作为其 ref。在虚拟 DOM 补丁算法中，如果 VNode 的 ref 键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值。

作为模板使用的 ref 的行为与任何其他 ref 一样：它们是响应式的，可以传递到 (或从中返回) 复合函数中。

---

# $refs

• 类型：Object

• 仅可读

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

$refs必须在模板渲染完成的情况下才能获取到 ref 的绑定内容。

长话短说，$refs获取ref的绑定对象，需要在 mounted 生命周期以及在 mounted 之后的周期里才能拿到，方法为`this.$refs.refName`。

$refs 没啥好讲的。。

---

QQ交流群：522976012  ，欢迎来玩

聚焦vue3，但不限于vue，任何前端问题，究其本质，值得讨论，研究与学习。