vue中ref有什么用

在Vue.js中，ref是一个特殊的属性，用于给元素或组件注册引用信息。通过在元素上添加ref属性，可以在Vue实例中通过$refs对象访问到这个元素或组件。

ref主要有两个用途：

1. 访问子组件或元素

当在一个父组件中使用子组件时，我们可以通过ref引用子组件实例，从而可以调用子组件的方法或访问子组件的属性。例如：

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

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 访问子组件实例
    this.$refs.child.method()
  }
}
</script>

2. 访问元素

当在Vue实例中需要直接访问DOM元素时，可以使用ref属性。例如：

<template>
  <div>
    <input ref="input" type="text">
  </div>
</template>

<script>
export default {
  mounted() {
    // 访问DOM元素
    this.$refs.input.focus();
  }
}
</script>

需要注意的是，使用$refs访问子组件或元素时，只能在组件已经渲染到DOM之后使用。否则会返回undefined。