Vue3中如何调用v-for循环组件的defineExpose暴露函数

你遇到的核心问题是把ref绑定在了外层的<div>上，所以拿到的是DOM节点而非组件实例。要调用组件暴露的doStuff方法，需要把ref直接绑定到<SomeComponent>组件本身，具体调整如下：

步骤1：调整模板中的ref绑定位置 #

将原本绑定在v-for容器<div>上的ref，转移到<SomeComponent>标签上，同时记得给v-for添加key属性（Vue规范要求）：

<template>
  <div v-for="(item) in lst" :key="item">
    <SomeComponent :attr="item" ref="someComponentRefs" />
  </div>
</template>

步骤2：修正脚本中的类型定义与函数语法 #

原代码存在两处问题：ref的类型声明不符合组件实例的类型要求，以及函数语法错误。调整后的代码如下：

<script setup lang="ts">
import SomeComponent from './SomeComponent.vue'; // 确保组件已正确导入

const lst = ref([1, 2, 3]);
// 使用InstanceType获取组件的实例类型，定义为数组类型
const someComponentRefs = ref<InstanceType<typeof SomeComponent>[]>([]);

function doStuffToItemOnIndex(index: number) {
    const target = someComponentRefs.value[index];
    if (target) { // 增加空值校验，避免组件未挂载或索引越界报错
        target.doStuff(); // 现在可正常调用组件暴露的方法
    }
}
</script>

关键说明 #

• Vue3在v-for中绑定ref到组件时，会自动将组件实例按循环顺序收集到对应的ref数组中，无需手动处理。
• 空值校验是必要的：组件可能还未完成挂载，或者传入的索引超出数组长度，直接调用方法会导致报错。
• 确保子组件通过defineExpose正确暴露doStuff方法（你的原代码已经完成这一步）。

内容的提问来源于stack exchange，提问作者Koen Peters