vue3 $refs

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

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

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

    const focusInput = () => {
      // 使用 $refs 获取 DOM 元素并操作
      myInput.value.focus();
    };

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

解释说明：

• ref="myInput"：在模板中的 <input> 元素上使用 ref 属性，将其引用命名为 myInput。
• const myInput = ref(null)：在 setup 函数中定义一个响应式的引用 myInput，初始值为 null。
• myInput.value.focus()：通过 myInput.value 访问实际的 DOM 元素，并调用其 focus 方法来聚焦输入框。
• return { myInput, focusInput }：将 myInput 和 focusInput 方法返回，使其可以在模板中使用。