一、前言
这篇文章涉及的主要内容有：
1、ref绑定在标签上是获取DOM对象
2、ref绑定在子组件上获取的是子组件对象
3、案列：自动获取input焦点
二、主要内容
1、基础内容：
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
（1）将ref绑定到标签上：测试之后发现在mounted()函数之后拿到的是button对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script>
var App = {
template:`
<div class='app'>
<button ref='btn'>我是按钮1</button>
</div>`, created(){
console.log(this.$refs.btn)
}, beforeMount:function(){
console.log(this.$refs.btn);
}, mounted(){
console.log(this.$refs.btn)//在这里才能拿到$refs.xxx
}
} new Vue({
el:'#app',
data(){
return { }
}, template:'<App />',
components:{
App
}
})
</script> </body>
</html>
（2）将ref绑定到子组件上：拿到的是子组件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('subCom',{
data(){
return{ }
}, template:`<div>
这是子组件 </div>`
}); var App = {
data(){
return{ }
},
template:`<div>
<button ref='btn'>我是按钮1</button>
<button ref='btn2'>我是按钮2</button>
<subCom ref='a'></subCom> </div>`,//这里拿到的是子组件对象
created(){
console.log(this.$refs.btn);
}, beforeMount(){
console.log(this.$refs.btn);
},
mounted(){
console.log(this.$refs.btn);
console.log(this.$refs.btn2);
console.log(this.$refs.a);
}
} new Vue({
el:'#app',
data(){
return{}
},
template:'<App/>',
components:{
App }
})
</script> </body>
</html>
2、自动获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var App = {
data: function (){
return {
isShow:false
}
},
template:`<div class='app'>
<input type='text' v-show='isShow' ref = 'input'/> </div>`,
//$nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据后使用$nextTick可以获取更新之后的DOM
mounted:function(){
this.isShow = true;
console.log(this.$refs.input);
this.$nextTick(function() {
this.$refs.input.focus();
})
}
}
new Vue({
el:'#app',
data:function(){
return { }
}, template:'<App/>',
components:{
App
}
});
</script> </body>
</html>
三、总结
1、ref不能重名，重名后面会覆盖掉前面的
2、ref绑定到标签上，$refs.xxx获取到的是Dom对象
3、ref绑定到子组件上，获取到的是子组件实例对象
4、$nextTick([callback])是下一次dom对象更新后执行里面的回调函数