vue3获取ref元素

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

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

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

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

    onMounted(() => {
      // 组件挂载后可以访问ref元素
      console.log(myInput.value); // 输出: <input> DOM元素
    });

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

解释说明：

1. ref 的使用：在模板中，我们通过 ref="myInput" 将输入框元素绑定到 myInput 变量。
2. setup 函数：这是 Vue 3 中的组合式 API 入口。我们在其中定义了 myInput 和 focusInput 方法。
3. onMounted 钩子：当组件挂载完成后，可以通过 myInput.value 访问实际的 DOM 元素。
4. focusInput 方法：点击按钮时，调用该方法，通过 myInput.value.focus() 来聚焦输入框。

这个示例展示了如何在 Vue 3 中使用 ref 获取 DOM 元素并对其进行操作。