Vue中ref和$refs的介绍以及使用方法示例

什么是ref

在Vue中， ref是一个特殊的属性，它可以在渲染组件模板时为其对应的元素或组件注册引用信息。

在创建一个vue实例时，我们经常会给一些元素或组件添加一个ref的特殊属性，这样在vue实例渲染出来后，我们就可以通过this.$refs.***的方式来获取对应元素或组件的引用，从而可以进行操作。

refs的使用方法示例1

我们可以在一个组件上通过ref来获取它的子组件，并调用子组件的方法。此处假设我们有一个名为ChildComponent的子组件，需要调用它的doSomething方法。

首先，我们需要在父组件中给子组件添加一个ref，代码如下：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted: function() {
    this.$refs.child.doSomething()
  }
}
</script>

上面的代码中，我们在父组件中给child-component添加了一个ref属性，名称为child，然后在父组件的mounted生命周期函数中，获取到了这个子组件实例的引用，并调用了它的doSomething方法。

什么是$refs

在Vue中，$refs是一个特殊的对象，它会自动收集子组件中所有注册了ref属性的信息。

当我们对一个组件使用ref属性时，该组件的实例会自动注册到父组件的$refs对象上。$refs是一个对象，它可以用来获取所有使用了ref属性的子组件的引用。

$refs的使用方法示例2

我们可以在父组件中使用$refs来获取子组件的引用，并进行操作。因此，$refs是一种非常方便获取子组件的途径。

下面的代码中，我们定义了一个名为ParentComponent的父组件，它包含一个名为child-component的子组件。我们在这个子组件上定义了一个ref，名称为child。

我们在父组件中使用ref属性来获取子组件的引用，并在mounted周期函数中展示子组件的当前值。

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted: function() {
    console.log(this.$refs.child.currentValue)
  }
}
</script>

在上面的代码中，我们打印了子组件对象的currentValue属性，该属性是在子组件中定义的。

总结一下：ref可以用来获取单个子组件的引用，$refs可以用来获取多个子组件的引用，这样我们就可以在多个子组件中使用同一个ref属性，从而可以更快捷方便的操作这些子组件实例。