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 实例。如果当前实例没有父实例,此实例将会是其自己。