ref有三种用法：
1、ref 加在普通元素上，用this.$refs.name 获取到的是dom元素
2、ref 加在子组件上，用this.$refs.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
注意：
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是通过v-for 循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
如下例子：
1、ref使用在外面的组件上
ref在外面的组件上
var refoutsidecomponentTem={
template:"
我是子组件
};
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-component vue实例
console.log(this.$refs.outsideComponentRef); // div.childComp vue实例，组件实例
}
}
});
2、ref使用在外面元素上
ref="outsideDomRef">ref在外面的元素上
var refoutsidedomTem={
template:"
我是子组件
};
var refoutsidedom=new Vue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-dom vue实例
console.log(this.$refs.outsideDomRef); //
标签dom元素 ref在外面的元素上
}
}
});
3、ref使用在里面的元素上--局部注册组件
ref在里面的元素上
var refinsidedomTem={
template:"
"
"
methods:{
consoleRef:function () {
console.log(this); // div.childComp vue实例
console.log(this.$refs.insideDomRef); // 我是子组件
}
}
};
var refinsidedom=new Vue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});
4、ref使用在里面的元素上--全局注册组件
Vue.component("ref-inside-dom-quanjv",{
template:"
" ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
"
ref在里面的元素上--全局注册
" +"
methods:{
showinsideDomRef:function () {
console.log(this); //这里的this其实还是div.insideFather
console.log(this.$refs.insideDomRefAll); //
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});
转自:https://www.cnblogs.com/goloving/p/9404099.html