如何在Vue3中使用Ref访问DOM元素

在Vue 3中，可以使用ref函数来创建一个响应式引用，该引用可以指向DOM元素或Vue组件实例。以下是如何在Vue 3中使用ref访问DOM元素的示例代码：

<template>
  <div>
    <input ref="inputRef" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    // 创建一个ref引用
    const inputRef = ref(null);
 
    // 挂载后直接访问DOM元素
    onMounted(() => {
      if (inputRef.value) {
        inputRef.value.focus(); // 直接调用DOM元素的方法
      }
    });
 
    // 定义一个方法来聚焦输入框
    function focusInput() {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    }
 
    // 暴露给模板的方法和引用
    return {
      inputRef,
      focusInput
    };
  }
};
</script>

在这个例子中，我们使用了ref属性在<input>元素上创建了一个引用，并通过setup函数中的ref函数声明了一个响应式引用inputRef。在模板中通过ref属性绑定DOM元素。在onMounted生命周期钩子中，可以直接访问并调用inputRef.value上的方法，例如focus()来聚焦输入框。同时，我们定义了一个方法focusInput，当按钮被点击时，该方法会被调用，并聚焦输入框。