Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
一、前言
这篇文章涉及的主要内容有：
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对象更新后执行里面的回调函数
