Vue前端框架中必不可少的属性——$refs
Vue中的ref 和$refs的使用
·
1、Vue中的ref 和$refs的区别
ref
以标签属性 的形式存在,接收String参数。
ref 被用来给元素或者子组件注册引用信息,
分为两种情况:
1、如果在普通的DOM元素上使用,引用指向的就是真实的DOM元素
2、如果用在子组件上,引用则指向的是组件实例对象
$refs
以对象的方式存在,表示持有ref属性的所有组件
该对象对应着ref属性:
1、如果ref是在普通的标签上,则$ref指向的就是该DOM元素
2、如果ref是在子组件上,则指向的是该组件的实例对象。
2、使用
代码演示
<template>
<input type = "text" value = "" ref = 'input'> <!--ref作为属性存在,接收一个字符串作为标识符-->
<button @click = 'show()'>展示input中的数据</button><!--展示输入的数据-->
</template>
<script>
name:'show',
methods:{
show(){
alert(this.$refs.input.value);
//得到this.$refs对象中input标识符所在的标签实例对象,并输出标签的value值
}
},
</script>
结果:
输入框输入:这是ref的使用演示
点击按钮后输出:这是ref的使用演示
3、ref结合v-for的特殊使用
v-for用于遍历数组或者对象,标签只用写一次,大大的简化的代码的冗余
<ul>
<li v-for = '(item,index) in array' :key = 'index'> {{item}} </li>
</ul>
但是,由于动态的遍历标签,所以就无法拿到指定的标签,这里ref有起到的不可代替的作用
代码
<template>
<ul>
<li v-for='(item,index) in array' :key = 'index' ref = 'li'> <!--遍历数组并将所有标签都绑定ref属性-->
{{item}}
<button @click = 'getli(index)'>显示数据</button> <!--方法响应-->
</li>
</ul>
</template>
<script>
name:'show',
data(){
return{
array:['包子','馒头','油条','豆浆','牛奶','面包'],
//需要遍历显示的内容,用数组的形式存放
}
},
methods:{
getli(index){
let li = this.$refs.li; //得到$refs对象中所有的li标识符所在的标签实例对象
//此时的局部变量li为一个数组,存放的是所有的li标签实例对象
alert(li[index].innerText);//取得指定的li对象,输入内部的值
}
},
</script>
4、总结
this.$refs.tagName 等同于 document.getElementsByClass('className');
$refs只在组件渲染完成后才填充,并且它并非响应式,它只是一个直接操作标签或者组件的应急方案,我们应该在开发中尽量少的使用它
更多推荐
已为社区贡献1条内容
所有评论(0)