vue中ref怎么用

vue中ref的用法有三种，分别是：1.ref加在普通的元素上，用this.ref.name获取dom元素；2.ref加在子组件上，用this.ref.name 获取组件实例，可以使用组件的所有方法；3.利用v-for和ref获取一组数组或者dom节点。

示例：

1.ref使用在外面的组件上。

<divid="ref-outside-component"v-on:click="consoleRef">
<component-fatherref="outsideComponentRef">
</component-father>
<p>ref在外面的组件上</p>
</div>
varrefoutsidecomponentTem={
template:"<divclass='childComp'><h5>我是子组件</h5></div>"
};
varrefoutsidecomponent=newVue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function(){
console.log(this);//#ref-outside-componentvue实例
console.log(this.$refs.outsideComponentRef);//div.childCompvue实例，组件实例
}
}
});

2.ref作用在外面元素上。

//ref在外面的元素上
<divid="ref-outside-dom"v-on:click="consoleRef">
<component-father>
</component-father>
<pref="outsideDomRef">ref在外面的元素上</p>
</div>
varrefoutsidedomTem={
template:"<divclass='childComp'><h5>我是子组件</h5></div>"
};
varrefoutsidedom=newVue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function(){
console.log(this);//#ref-outside-domvue实例
console.log(this.$refs.outsideDomRef);//<p>标签dom元素ref在外面的元素上</p>
}
}
});

3.ref使用在里面的元素上，局部注册组件。

//ref在里面的元素上
<divid="ref-inside-dom">
<component-father>
</component-father>
<p>ref在里面的元素上</p>
</div>
varrefinsidedomTem={
template:"<divclass='childComp'v-on:click='consoleRef'>"+
"<h5ref='insideDomRef'>我是子组件</h5>"+
"</div>",
methods:{
consoleRef:function(){
console.log(this);//div.childCompvue实例
console.log(this.$refs.insideDomRef);//<h5>我是子组件</h5>
}
}
};
varrefinsidedom=newVue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});

4.ref使用在里面的元素上，全局注册组件。

//ref在里面的元素上--全局注册
<divid="ref-inside-dom-all">
<ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>
Vue.component("ref-inside-dom-quanjv",{
template:"<divclass='insideFather'>"+
"<inputtype='text'ref='insideDomRefAll'v-on:input='showinsideDomRef'>"+
"<p>ref在里面的元素上--全局注册</p>"+
"</div>",
methods:{
showinsideDomRef:function(){
console.log(this);//这里的this其实还是div.insideFather
console.log(this.$refs.insideDomRefAll);//<inputtype="text">
}
}
});
varrefinsidedomall=newVue({
el:"#ref-inside-dom-all"
});