前言

在做实训项目的时候，尽管存在 prop 和事件，有的时候仍需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。

ref

ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.usernameInput` will be the child component instance -->
<base-input ref="usernameInput"></base-input>

vm.$refs

类型：Object

只读

详细：

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

访问子组件实例或子元素

在定义了子组件的ref之后，可以使用：this.$refs.usernameInput来访问这个 <base-input> 实例，以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。

在刚才那个例子中，该<base-input>组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，例如： <input ref="input">

甚至可以通过其父级组件定义方法：

methods: {
  // 用来从父级组件聚焦输入框
  focus: function () {
    this.$refs.input.focus()
  }
}

这样父级组件就可以通过下面的代码聚焦 <base-input> 里的输入框：

this.$refs.usernameInput.focus()

当 ref 和 v-for 一起使用的时候，得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

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

来源：官方文档