Vue 中的 ref 属性详解

Vue 中的 ref 属性详解

我们先来读一下vue的官方文档

我们来分析官方文档
首先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.$refs是什么呢？

通俗的将就是搜集所有的ref的一个对象。通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素，并对其进行操作。

其实组件中的子组件的ref原理也类似，只是指向的不是原组件而是组件的实例。
用法和普通DOM元素一样。