vue属性介绍（一）ref 与$refs的互生关系

傷城~ 2023-05-30 14:58 21阅读 0赞

### 文章目录 ###

*   *  场景介绍
     *  实例介绍
     *  ref在实例中的应用
     *  $refs在实例中的应用
     *  重要提醒

## 场景介绍 ##

当我们需要在js中获取某个节点的时候，我们一般会采用什么呢，js中可以是`document.getelementById("dom")`,jquery中可以是`$("#dom")`,那么vue中我们可以怎样快速获取指定节点的dom信息呢，我想说的是：ref为你而来。

## 实例介绍 ##

在介绍实例之前，我们先来说一下ref 和$refs的区别：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>详情</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ref</td> 
   <td>用于dom元素中，用于标记dom元素。</td> 
  </tr> 
  <tr> 
   <td>$refs</td> 
   <td>用于create或method方法中，用于获取标记的dom元素。</td> 
  </tr> 
 </tbody> 
</table>

由以上表格可以看出，我说他们是互生关系实至名归。

## 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 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。**