详细来说ref 被用来给DOM元素或子组件注册引用信息。
引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例
注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册
我们来分析官方文档
首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值。
通俗的将就类似于原生js用document.getElementById("#id")
但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个ref的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。
说了这么多那么如何具体使用呢?
首先尝试普通DOM元素
<div id="app">
<input type="text" value="HelloWorld" alt="captcha" ref="text">
<button @click="changeText">change word</button>
</div>
这是一段特别简单的html中加input和button代码
目的是运用ref属性点击按钮更改input中的文字。
我们在标签中加入ref属性
var app = new Vue({
el: '#app',
data: {
},
//添加一个方法
methods:{
//改变文字
changeText () {
this.$refs.text.value = 'Hello Vue!'
}
}
});
网页初始时input现实的文字是HelloWorld
当点击change word按钮时,input中的文字发生变化
那么刚才代码中的this.
r
e
f
s
是
什
么
呢
?
通
俗
的
将
就
是
搜
集
所
有
的
r
e
f
的
一
个
对
象
。
通
过
t
h
i
s
.
refs是什么呢? 通俗的将就是搜集所有的ref的一个对象。通过this.
refs是什么呢?通俗的将就是搜集所有的ref的一个对象。通过this.refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素,并对其进行操作。
其实组件中的子组件的ref原理也类似,只是指向的不是原组件而是组件的实例。
用法和普通DOM元素一样。