vue3 获取遍历的子组件

<template>
  <div>
    <!-- 使用v-for遍历数据，并为每个子组件设置一个ref -->
    <ChildComponent
      v-for="(item, index) in items"
      :key="index"
      :ref="el => setChildRef(el, index)"
    />
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const items = ref([{}, {}, {}]); // 假设有3个子组件实例
const childComponents = ref([]); // 用于存储子组件的数组
 
// 回调函数，用于设置ref
function setChildRef(el, index) {
  if (el) {
    childComponents.value.push(el);
  }
}
 
onMounted(() => {
  // 在组件挂载后，childComponents数组将包含所有子组件的引用
  console.log(childComponents.value);
});
</script>