vue3获取refs

在Vue 3中，可以使用Refs来获取DOM元素或组件的引用。Refs是一种新的API，用于访问DOM元素或组件实例。与Vue2中的$refs类似，但在Vue3中，Refs可以是一个字符串或一个函数。当Refs是一个字符串时，可以将其关联到相应的元素或组件上，并使用.value来访问它们。例如，在模板中定义一个输入框的引用如下：

<template>
  <div>
    <input ref="inputRef" />
    <button @click="handleClick">Click me</button>
  </div>
</template>

然后，在setup函数中使用ref来创建一个Refs，并返回它：

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

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

    const handleClick = () => {
      inputRef.value.focus();
    };

    return {
      inputRef,
      handleClick,
    };
  },
};
</script>

在这个例子中，通过ref创建了一个inputRef的Refs，并将其关联到input标签上。然后，可以通过inputRef.value来访问该输入框的DOM元素，并进行相关的操作。比如，点击按钮时可以调用handleClick函数，使输入框获取焦点。

总结起来，Vue 3中可以使用Refs来获取DOM元素或组件的引用。当Refs是一个字符串时，可以将其关联到相应的元素或组件上，并使用.value来访问它们。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue3的refs用法](https://blog.csdn.net/XU441520/article/details/129553900)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3.0获取$refs](https://blog.csdn.net/susanliy/article/details/122132634)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]