Vue3 + Ts 获取dom

在Vue 3和TypeScript中获取DOM元素可以通过多种方式实现，其中一种方法是使用ref属性。ref是Vue提供的一个属性，可以用来访问模板中的DOM元素。

以下是一个简单的例子：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
 
export default defineComponent({
  setup() {
    const inputRef = ref<HTMLInputElement|null>(null);
 
    const focusInput = () => {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    };
 
    onMounted(() => {
      if (inputRef.value) {
        console.log(inputRef.value.tagName); // 输出 "INPUT"
      }
    });
 
    return {
      inputRef,
      focusInput
    };
  }
});
</script>

在这个例子中，我们定义了一个<input>元素并通过ref="inputRef"为它设置了一个引用。在setup函数中，我们创建了一个响应式引用inputRef，并将其初始化为null。

当组件被挂载（onMounted生命周期钩子）后，我们可以通过inputRef.value来访问这个<input>元素，并且可以获取到它的DOM属性和方法。例如，focusInput函数会在点击按钮时调用，使输入框获得焦点。