vue3 ref 获取dom

<template>
  <div>
    <!-- 使用 ref 属性为 DOM 元素指定一个引用 -->
    <input ref="myInput" type="text" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

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

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

    // 定义一个方法来聚焦输入框
    const focusInput = () => {
      // 通过 myInput.value 获取 DOM 元素并调用其 focus 方法
      myInput.value.focus();
    };

    // 在组件挂载后可以操作 DOM
    onMounted(() => {
      // 可以在这里对 myInput 进行操作
      console.log(myInput.value); // 输出: <input> DOM 元素
    });

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

解释说明：

1. 模板部分：在 <input> 标签上使用 ref="myInput" 来为该元素创建一个引用。
2. 脚本部分：
   • 使用 ref 函数创建一个响应式的引用对象 myInput，初始值为 null。
   • focusInput 方法通过 myInput.value 获取实际的 DOM 元素，并调用其 focus() 方法来聚焦输入框。
   • onMounted 钩子函数确保在组件挂载完成后可以安全地访问 DOM 元素。