Vue.js中ref和$refs的使用及示例讲解

什么是ref

在Vue.js中，ref是用来获取元素或组件标识的指令，相当于“id”或“class”属性，我们可以在Vue实例中通过$refs对象访问它们。主要有以下两种用法：

1.在DOM元素上使用ref

在DOM元素上使用ref可以获取DOM节点元素，我们可以通过引用这个DOM节点元素，使用原生JavaScript或其他框架来操作它。

<template>
  <div>
    <input type="text" ref="username">
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.username); //打印出输入框DOM元素
    this.$refs.username.focus(); //使输入框获得焦点
  }
}
</script>

2.在组件上使用ref

在组件上使用ref可以获取组件实例，我们可以通过引用这个实例，调用组件上的方法或访问其数据属性。

<template>
  <div>
    <child ref="mychild"></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    callChildMethod() {
      this.$refs.mychild.minus(); //调用子组件中的minus方法
      console.log(this.$refs.mychild.msg); //打印子组件的msg数据
    }
  }
}
</script>

$refs的使用注意事项

$refs只在组件渲染完成后才能访问到，所以在Vue实例的mounted钩子函数或组件的mounted钩子函数中使用$refs才能取到对应的元素或组件的实例。

在生命周期的其它钩子函数中（如created和updated等），$refs的值为undefined，因为渲染阶段还没有完成。

需要注意的是，当在循环中使用ref时，$refs返回的将是一个包含相应DOM元素或组件实例的数组

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" ref="box">{{ item }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  mounted() {
    console.log(this.$refs.box); //返回一个数组，包含三个对应DOM元素
  }
}
</script>

示例说明

获取input输入框的值

<template>
  <div>
    <input type="text" ref="username" @keyup.enter="handleClick">
    <button @click="handleClick">点击</button>
    <p>输入的值为：{{ value }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleClick() {
      this.value = this.$refs.username.value;
    }
  }
}
</script>

首先在模板中给输入框添加ref属性，然后在Vue实例中使用this.$refs.username获取DOM元素，最后通过DOM节点元素的value属性获取输入框的值。

调用子组件方法

<template>
  <div>
    <child ref="mychild"></child>
    <button @click="handleClick">点击</button>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    handleClick() {
      this.$refs.mychild.minus();
    }
  }
}
</script>

首先在模板中给子组件添加ref属性，然后在Vue实例中使用this.$refs.mychild获取组件实例，最后通过组件实例的minus方法进行减法操作。