Vue 中的 ref 属性详解_前端大猪草的博客-CSDN博客
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元素一样。
————————————————
版权声明:本文为CSDN博主「前端大猪草」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_38981993/article/details/82944629