vue3 ref获取元素

<template>
  <div>
    <!-- 使用 ref 属性为元素或子组件注册引用 -->
    <input type="text" ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个 ref 对象来引用 DOM 元素
    const myInput = ref(null);

    // 定义一个方法来聚焦输入框
    const focusInput = () => {
      if (myInput.value) {
        myInput.value.focus();
      }
    };

    // 在组件挂载后获取 DOM 元素
    onMounted(() => {
      console.log(myInput.value); // 输出: input DOM 元素
    });

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

解释说明：

1. ref 属性：在模板中使用 ref="myInput" 为 <input> 元素注册了一个引用。
2. ref 函数：在 setup 函数中使用 ref(null) 创建了一个响应式的引用对象 myInput，它将指向 DOM 元素。
3. onMounted 钩子：在组件挂载完成后，可以通过 myInput.value 获取到实际的 DOM 元素。
4. focusInput 方法：点击按钮时调用此方法，通过 myInput.value.focus() 让输入框获得焦点。

这种方式可以方便地操作 DOM 元素，而不需要直接使用原生的 document.querySelector 等方法。