vue3的ref获取组件

在Vue3中，可以通过使用`ref`函数来获取组件的引用。首先，在模板中使用`ref`指令给组件添加一个引用属性。例如，可以在`<div>`元素上使用`ref`指令来获取组件的引用，如下所示：

<template>
  <div ref="cptRef">...</div>
</template>

然后，在`setup`函数中，使用`ref`函数创建一个响应式的引用对象，并将其赋值给一个变量。通过访问`cptRef.value`，可以获取到组件上的属性或方法。完整的示例代码如下：

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

export default {
  setup() {
    const cptRef = ref(null);
    // 可通过cptRef.value获取组件上的属性或方法

    return {
      cptRef
    }
  }
}
</script>

如果组件是动态渲染的，例如在`v-for`循环中，可以使用`:ref`指令来动态设置引用属性。以下是一个示例代码：

<template>
  <component v-for="item in cptArr" :key="item.type" :ref="setItemRef" :is="item.type"></component>
</template>

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

export default {
  setup() {
    const cptArr = \[
      { type: 'imgCpt', option: {...} },
      { type: 'advCpt', option: {...} }
    \];

    const itemRefs = \[\];

    const setItemRef = el => {
      if (el) {
        itemRefs.push(el);
      }
    }

    itemRefs.forEach(item => {
      // item 即为对应的组件ref
      // 可通过 item 获取对应组件上的属性或方法
    });

    return {
      setItemRef
    }
  }
}
</script>

通过以上方式，可以在Vue3中使用`ref`来获取组件的引用。
#### 引用[.reference_title]
- *1* *2* [vue3 通过动态 ref 获取 v-for 中的组件](https://blog.csdn.net/qq_26834399/article/details/119992536)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [前端之vue3使用ref获取子组件数据](https://blog.csdn.net/weixin_46372074/article/details/125138856)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]