ref的三种用法 Vue

1 如果用在普通的dom元素上，那么就是指向当前的dom元素
2 如果用在子组件上，那么就是指向该组件的实例，可以在父组件调用子组件里面的方法
3 当ref和v-for一起使用时，获取到的引用将会是一个数组，就是循环的数组

举栗子：
(1) 比如第一个 可以获取到当前元素给他添加样式或者动效

this.$refs.children.style.height = '200px'
this.$refs.children.style.transition = 'height 0.5s ease'

(2) 比如第二个，在子组件上写上

<children ref="child"></children>

那么就可以在父组件上直接调用子组件中的方法,假如子组件中有个方法名叫reset()

this.$refs.child.reset()
this.$refs.child      // 这样是返回一个对象，一个子组件的实例对象

(3) 比如第三个 ref和v-for一起使用的时候

// arr = [1,2,3,4,5]
<div ref="chidren" v-for="(item,index) in arr" :key="index"></div>
console.log(this.$refs.children)         // [1,2,3,4,5]

注意：
$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定
比如在生命周期 mounted(){} 钩子中调用
或者在created声明周期中

created() {
	this.nextTick(() => {
		console.log(this.$refs.children)
	})
}