只要在vue里访问元素/子组件,就要使用ref注册引用;
1.访问子组件实例或者子元素
通过ref给元素或者子组件赋予id引用
<base-input ref="usernameInput"></base-input>
给子组件base-input定义了ref,可以通过访问子组件base-input
this.$refs.usernameInput
2.ref和通过id和class访问元素的区别
2.1 ref是vue里的方法,更加安全,不会依赖class或者id的样式变了而影响布局;
2.2 vue的主要目的是减少dom的操作。减少dom节点的消耗
3.ref作用:
用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。
如果给普通的dom元素使用,引用指向的是dom元素;
如果是给子组件使用,引用指向的是子组件的实例;
<div>
<input type="text" ref='input'>
</div>
console.log(this.$refs.input); //<input type='text'>
this.$refs ----- {main: div, input: input}
refs和v-for循环使用
<ul>
<li v-for="n in 10" :key="n" ref='numbers'>{{n}}</li>
</ul>
console.log(_this.$refs.numbers);//li的数组(10) [li, li, li, li, li, li, li, li, li, li]