vue3循环校验子组件表单

<template>
  <el-form
    ref="form"
    :model="formData"
    :rules="formRules"
    label-width="80px"
    class="child-form"
  >
    <!-- Your form fields go here -->
    <el-form-item label="Field 1" prop="field1">
      <el-input v-model="formData.field1"></el-input>
    </el-form-item>
    <el-form-item label="Field 2" prop="field2">
      <el-input v-model="formData.field2"></el-input>
    </el-form-item>

    <!-- Add more form fields as needed -->

  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  props: {
    componentName: String, // Add a prop to store the component name
  },
  setup(props) {
    const formData = r