$refs 绑定的理解和使用

对$refs 绑定的理解和使用

1.理解

在原生里获取DOM元素，需要document.querySelector（""）获取dom节点，然后在获取值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在dom中绑定refs，然后$refs调用就行。

this.$refs.xxx 这样就可以减少获取dom节点的消耗了

2.用法

1、ref 加在普通的元素上，用this.$refs.xxx 获取到的是dom元素

2、ref 加在子组件上，用this.$refs.xxx 获取到的是组件实例，可以使用组件的所有方法。

3.注意

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。