今天来聊聊关于ref和refs是什么东东的知识，这两个东西是做前端应该都知道的知识点，其实也没有那么复杂难懂，只是在最开始的时候不知道是什么而已，当看了文档，然后配合代码就清楚知道他的含义了。

首先我们来看看官网的API解释

预期：string

预期就是指默认的一个类型吧。

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

解释：意思就是说它可以放到组件上面，这样后续你要用就可以通过一个变量直接使用。

<p ref="p">hello</p>

这段代码在p标签上面添加了一个ref=p,等于右边变量可以自己随便写，这样一个动作过后，后面就可以直接使用了。

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

访问子组件实例或子元素

有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

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

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

this.$refs.usernameInput

上面就可以直接反问了，而且你可以通过父组件来反问：this.$refs.input.focus()

这样也是没有问题的。