vue3中$refs

在Vue3中，$refs是一种用于访问DOM元素或组件实例的新API。它提供了一种简单的方式来获取组件或DOM元素的引用，类似于Vue2中的$refs。不同于Vue2，Vue3中的$refs可以是一个字符串或一个函数。当$refs是一个字符串时，在渲染时会将其关联到相应的元素或组件上，然后可以使用.value来访问它们。举个例子，在模板中可以这样使用$refs：

<template>
  <div>
    <input ref="inputRef" />
    <button @click="handleClick">Click me</button>
  </div>
</template>
<script>
import { ref } from 'vue';

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

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

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

在上面的例子中，我们通过ref创建了一个名为inputRef的引用。然后在handleClick方法中，我们可以使用inputRef.value来访问input元素并调用它的focus方法。这样就实现了通过$refs访问DOM元素的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3使用$refs](https://blog.csdn.net/weixin_52164116/article/details/129683079)[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%"]
- *2* *3* [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%"]
[ .reference_list ]