vue中ref的用法
一、ref有如下三种用法：
ref 加在普通的元素上，用 this.$refs.name 获取到的是dom元素；
ref 加在子组件上，用 this.$refs.name 获取到的是子组件实例，父组件可以使用子组件的所有方法(在上篇博客已介绍)；
如何利用 v-for 和 ref 获取一组数组或者dom 节点
二、注意点
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
三、ref 的用法
1.加在普通元素上，获取dom元素
<input type="text" ref="inputRef"/>
mounted(){
this.$refs.inputRef.focus();
}
//或者
created(){
this.$nextTick(()=>{
this.$refs.inputRef.focus();
})
},
2.v-for 和 ref,获取dom元素
（1）形式一：动态绑定ref
<div v-for="(item,index) in user" v-bind:key="index" v-bind:ref="'dom'+index" @click="getdom(index)">{{item.name}}</div>
data(){
return {
user:[
{name:"小花",age:18},
{name:"小黄",age:19},
{name:"小蓝",age:20},
]
}
},
getdom(index){
var r = "dom"+index;
var s = this.$refs[r][0].innerhtml;
console.log(s)
},
（2）形式二：ref使用固定值
<div v-for="(item,index) in user" v-bind:key="index" ref="dom" @click="getdom(index)">{{item.name}}</div>
data(){
return {
user:[
{name:"小花",age:18},
{name:"小黄",age:19},
{name:"小蓝",age:20},
]
}
},
getdom(index){
//此时this.$refs.dom是一个数组
var s = this.$refs.dom[index].innerHTML;
console.log(s)
},
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
