vue3 ref获取dom

<template>
  <div>
    <input ref="inputRef" type="text" placeholder="请输入内容" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

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

// 定义一个ref来引用DOM元素
const inputRef = ref(null);

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

// 在组件挂载后，可以操作DOM元素
onMounted(() => {
  if (inputRef.value) {
    console.log('DOM元素已挂载:', inputRef.value);
  }
});
</script>

解释说明：

1. 模板部分 (<template>):

   • 使用 ref="inputRef" 来绑定到 <input> 元素，这样可以在 JavaScript 中通过 inputRef 访问该 DOM 元素。
   • 添加了一个按钮，点击时调用 focusInput 方法。

2. 脚本部分 (<script setup>):

   • 使用 ref 函数创建一个响应式的引用 inputRef，初始值为 null。
   • 定义了 focusInput 方法，当点击按钮时会调用此方法，使输入框获得焦点。
   • 使用 onMounted 钩子在组件挂载后执行一些逻辑，例如打印出 DOM 元素或对其进行其他操作。

这样就可以通过 ref 来获取和操作 DOM 元素。