本文主要是介绍vue属性介绍（一）ref 与$refs的互生关系，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 场景介绍
- 实例介绍
- ref在实例中的应用
- $refs在实例中的应用
- 重要提醒
场景介绍
当我们需要在js中获取某个节点的时候，我们一般会采用什么呢，js中可以是document.getelementById("dom"),jquery中可以是$("#dom"),那么vue中我们可以怎样快速获取指定节点的dom信息呢，我想说的是：ref为你而来。
实例介绍
在介绍实例之前，我们先来说一下ref 和$refs的区别：
| 属性 | 详情 |
|---|---|
| ref | 用于dom元素中，用于标记dom元素。 |
| $refs | 用于create或method方法中，用于获取标记的dom元素。 |
由以上表格可以看出，我说他们是互生关系实至名归。
ref在实例中的应用
在以下的代码片段中，我们将mail注册在父组件$refs 对象中,第二种是我们将mailMsg注册到 $refs ,注册后我们获取的是整个dom元素。
<div class="mail"><span>邮箱：</span><input type="text" class="text" v-model="mail" ref="mail"/><img src="./fhz.png" @click="clearMail" v-show="isClearMail"><p ref="mailMsg">*请填写正确邮箱</p></div>
$refs在实例中的应用
$refs 用于获取已注册的元素。比如下面我们设置mail的焦点（或者或者整个元素）可以通过以下的方式实现。
mounted(){this.$refs.mail.focus();},
重要提醒
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
这篇关于vue属性介绍（一）ref 与$refs的互生关系的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
