Vue中refs和ref的用法
vue 中的ref
开发过程中遇到的问题
在实际的操作过程中发现在created生命周期中打印refs,结果为空对象
created:{
console.log(this.$refs);// {}
}
知识点的查漏补缺
vm.$refs
类型: Object
只读
一个对象,持有已注册过ref的所有子组件
ref
ref被用来给元素或子组件注册引用信息。引用信息将会被注册到父组件的$refs对象中。
如果在普通的DOM元素上,引用指向的就是DOM元素;如果用在子组件上,引用指向的就是组件实例
//在p节点上
<p ref="p"></p>
//$refs在实例上
<child-comp ref="child"></child-comp>
-
** ref只是作为渲染结果被创建,在初次渲染的时候你不能访问,因为他们还不存在!也就是在created生命周期的时候还没存在,所以无法访问到。$refs 只有在组件渲染完成时候才会填充**
-
$refs也不是响应式的,因此你也不应该试图用它在模板中坐数据绑定。应当避免在模板或计算属性中使用 $refs
-
当ref和v-for使用的时候,获取的引用是一个数组,包含和循环数据源对应的子组件实例。
参考: vue中的 ref 和 $refs