ref与$refs访问子组件实例或子元素

尽管存在 prop 和事件，有的时候仍可能需要在 JavaScript 里直接访问某个特定的子组件。为了达到这个目的，可以通过 ref 这个 属性 为子组件赋予一个 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

现在在已经定义了这个 ref 的组件里，可以使用：

this.$refs.usernameInput

来访问这个 <base-input>实例。

注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——应该避免在模板或计算属性中访问 $refs。

ref 被用来给元素或子组件注册引用信息

预期接收类型：string
例如：ref="inputItem"

引用信息将会注册在父组件的 $refs对象上。
1. 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
2. 如果用在子组件上，引用就指向组件实例。

<!-- `vm.$refs.p` 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素 -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` 用在子组件上，引用就指向组件实例 -->
<child-component ref="child"></child-component>

当在子组件使用ref时，由于引用指向组件实例，并不能直接通过引用获取组件的属性，所以需要另外使用$el。

所有组件都有一个属性$el: 用于获取组件中的元素。this.$refs.child.$el.属性

当v-for用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于ref注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

一句话总结

ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件；
ref和$refs其实就是用来获取/操作DOM元素的；类似于jquey中的$(".xxx")。

赏