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>

 

__EOF__

本文作者：秦士振
本文链接：https://www.cnblogs.com/qinshizhen/p/18143672.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！