Vue 当中的 ref 和 $refs

Vue 当中的 ref 和 $refs

​ 一般来讲，获取DOM元素，需要使用document.querySelector(’#input1’)方法去获取dom节点，然后再获取input1的值。

但是使用了ref绑定之后，我们就不需要再获取dom节点了，可以直接在上面的input上绑定input1，然后**$refs里面调用就行**。

在JavaScript里面通过this.$ refs.input1 去调用，这样的做法实际上是访问VUE虚拟出来的DOM，可以有效减少获取/操作DOM节点的性能消耗。

父访问子-children-refs

拿到实例对象VueComponent

$children[0]:有多少个子组件就有多少个角标。

当前实例的直接子组件。**需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

⛳️ $refs(reference引用):对象类型,默认是一个空的对象

子组件：<cpn ref='aaa'/>
父组件：this.$refs.aaa

子访问父-parent-root

$parent:父实例，如果当前实例有的话。获取父组件的属性，但是不常用，耦合度太高

$root:访问根组件。当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。