Vue实战时用到的API(一)：$refs和ref

什么是$refs以及ref

让我们看下官方文档对他们的介绍：

1. 首先什么是ref

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

2. 再来看看什么是$refs

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

这两个东西放在一起一看，很明了，总结来说就是我们通过$refs去调用ref注册的元素或者子组件，那这样有什么用呢？待我慢慢道来，我们先去验证下我们的结论，在这过程中或许我们就能清楚他们的用法了。

ref给元素注册引用信息

首先先上代码：

<div id="demo">
  <p ref="refDemo"></p>
</div>

var vm=new Vue({
   el:'#demo'
})

我们可以看到我们给元素注册引用信息的时候需要给他一个 String 值，这个值有什么用呢?自然是给 $refs 调用准备的，让我们来试试看。

console.log(vm.$refs.refDemo)

让我们打印输出看一下，这个到底是何方神圣。

正如API中提到的，当ref是给元素注册时，指向的就是这个元素本身。

ref给组件注册引用信息

老规矩，上实例代码：

<div id="demo">
  <child ref="component"></child> 
</div>

   Vue.component('child',{
     template:`<p></p>`,
     methods: {
       sayHi(){
         console.log('我是子组件')
       }
     },
   }
   )
   var vm=new Vue({
     el:'#demo',
   })
    
   console.log(vm.$refs.component)

在实例里我们注册了一个全局组件 child ，然后在div里引用了这个组件。这里我们同样也输出这个引用指的是啥。如下：

可以看到他的输出可比上面多得多了，很显然这是 child 组件的实例，我们在组件上注册的方法 sayHi 也可以在输出里看到，当我们需要直接调用子组件的方法或者获取值，用ref在组件上注册一个引用不失为一个好办法。