【vue3】Vue3中的ref属性：让元素引用变得简单

在Vue 3中，ref属性被用来创建响应式的引用对象（reactive references），这些引用可以用来访问组件模板中的DOM元素或子组件的实例。

以下是一个使用ref属性的基本示例：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 创建一个ref引用
    const inputRef = ref(null);
 
    // 定义一个方法用来获取焦点
    function focusInput() {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    }
 
    // 返回变量和方法，以便它们可以在模板中被使用
    return {
      inputRef,
      focusInput
    };
  }
};
</script>

在这个例子中，我们创建了一个ref叫做inputRef，它在模板中被用在<input>元素上。通过.value属性，我们可以访问到实际的DOM元素。focusInput方法通过引用inputRef来使输入框获取焦点。