vue里ref ($refs)用法
ref 有三种用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
注意：
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
一、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实例，组件实例
}
}
});
二、ref作用在外面元素上
//ref在外面的元素上
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在外面的元素上
}
}
});
三、ref使用在里面的元素上--局部注册组件
//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
}
});
四、ref使用在里面的元素上--全局注册组件
//ref在里面的元素上--全局注册
Vue.component("ref-inside-dom-quanjv",{
template:"
"" +
"
ref在里面的元素上--全局注册
" +"
methods:{
showinsideDomRef:function () {
console.log(this); //这里的this其实还是div.insideFather
console.log(this.$refs.insideDomRefAll); //
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});