vue3语法在标签上用ref如何获取使用

在 Vue 3 中，可以使用 `ref` 函数在标签上创建一个引用，并使用 `$refs` 对象在代码中访问该引用。

以下是一个示例：

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myInput = ref(null);

    function focusInput() {
      myInput.value.focus();
    }

    return {
      myInput,
      focusInput,
    }
  }
}
</script>

在上面的示例中，我们在 `<input>` 标签上使用 `ref` 函数创建了一个名为 `myInput` 的引用。然后，我们在 `setup` 函数中返回了 `myInput` 变量和 `focusInput` 函数，该函数在被调用时会将焦点设置到输入框中。

要访问该引用，可以使用 `$refs` 对象。例如，要在代码中访问 `myInput` 引用，可以使用 `$refs` 对象的 `myInput` 属性，如下所示：

this.$refs.myInput

需要注意的是，引用只有在组件渲染后才会被创建，因此在组件挂载（`mounted`）生命周期钩子函数之前，引用会是 `undefined`。因此，在访问引用之前，需要确保组件已经被渲染。