ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。--官网简介
这里我们简单理解就是如果我们可以通过ref获取DOM 元素或组件实例。
一、DOM
<template>
<div>
<p ref="p">ref-test</p>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
console.log(this.$refs.p)
}
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/cfb60e925c82a88030add19047764970.png)
DOM
二、组件
//组件文件
<template>
<div>
<p ref="p">ref-test</p>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
console.log(this.$refs.p)
}
}
</script>
//父组件文件
//引入组件
<com ref="com"></com>
//打印数据
console.log(this.$refs.com)
打印数据如图:
![](https://i-blog.csdnimg.cn/blog_migrate/018ea7a4748d86af5e2ec18b05186308.png)
组件
由此可以看出,通过
ref
我们可以快速的访问组件实例,及其相关属性方法。
注意
- 这里我们只能取到组件的值或调用方法,不可以通过这个方法改变组件的相关属性值。
- 因为
ref
本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs
也不是响应式的,因此不可以用它在模板中做数据绑定。
这就是我对vue中ref
的阶段性了解,后期将会有更深入的研究。
坚持自己内心的想法,真正想做的事。真正努力的人 都很低调。不在意外界影响,不抱怨生活现状,即使没有光环加身也依旧努力过好每一天。