Vue3中如何调用v-for循环创建的子组件内的函数？

1. 重构父组件的表单数据结构 #

不要只存储type数组，改成包含每个表单项完整信息的对象数组，让每个项自带type和title字段，方便和子组件同步数据：

// 父组件组合式API代码
const formItems = ref([
  { id: 1, type: 'text', title: '' },
  // 后续添加的项也按此结构生成
])

2. 子组件实现双向绑定，同步问题文本 #

子组件通过defineProps接收父组件传递的type和modelValue（对应v-model绑定的title），并通过defineEmits触发更新事件，同时用defineExpose暴露toString方法给父组件：

<!-- FormComponent.vue -->
<script setup>
const props = defineProps({
  type: String,
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])

// 实现toString方法，返回所需格式的字符串
const toString = () => {
  return `${props.modelValue} <HTML ${props.type}Input`
}
// 暴露方法给父组件访问
defineExpose({ toString })
</script>

<template>
  <div v-if="type=='text'">
    <input 
      type="text" 
      placeholder="Key in title"
      :value="modelValue"
      @input="emit('update:modelValue', $event.target.value)"
    /> 
    <span>Input field here</span>
  </div>
  <!-- 其他类型输入项（单选等）可参照此逻辑扩展 -->
</template>

3. 父组件正确绑定子组件ref，获取组件实例 #

将ref直接绑定在FormComponent标签上，而非外层div，这样父组件能通过$refs拿到子组件的实例数组：

<!-- 父组件模板 -->
<div v-for="item in formItems" :key="item.id">
  <FormComponent 
    :type="item.type" 
    v-model="item.title"
    ref="formComponents"
  />
</div>
<button @click="exportForm">Export Form</button>

4. 父组件实现导出逻辑，调用子组件的toString方法 #

在父组件的导出方法中，遍历子组件实例数组，调用每个组件的toString方法收集结果：

// 父组件组合式API代码
const formComponents = ref([])

const exportForm = () => {
  const exportResult = formComponents.value.map(component => {
    return component.toString()
  })
  // 此处可处理导出后的逻辑，比如打印、提交后端等
  console.log('导出结果:', exportResult)
}

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