使用vue3+elementplus+ts给出父子组件完整示例，要求在父组件中循环出子组件，在父组件中点击保存时候循环校验所有子组件的form表单，当有一个校验不通过时停止校验并输入当前校验不通过的组

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent
      v-for="(child, index) in childComponents"
      :key="index"
      v-model="child.form"
      :name="`子组件 ${index + 1}`"
    />

    <el-button @click="save">保存</el-button>
  </div>
</template>

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

export default defineComponent({
  components: {
    ChildComponent,
  },
  data() {
    return {
      childComponents: [{ form: {} }, { form: {} }],
    };
  },
  methods: {
    async save() {
      for (let i = 0; i < this.childComponents.length; i++) {
        const childForm = this.childComponents[i];

        // 调用子组件的表单校验方法
        const valid = await this.validateChildForm(childForm);

        if (!valid) {
          // 表单校验失败
          this.$message.error(`请正确填写 ${this.getChildComponentName(i)} 的表单信息`);
          break; // 停止继续校验
        }
      }
    },
    async validateChildForm(childForm: any) {
      return new Promise<boolean>((resolve) => {
        if (childForm.validate) {
          childForm.validate((valid: boolean) => {
            resolve(valid);
          });
        } else {
          resolve(true); // 如果子组件没有 validate 方法，直接通过
        }
      });
    },
    getChildComponentName(index: number) {
      // 根据实际情况获取子组件的名称
      return `子组件 ${index + 1}`;
    },
  },
});
</script>

<!-- ChildComponent.vue -->
<template>
  <el-form ref="form" :model="form" :rules="formRules">
    <el-form-item label="字段名" prop="fieldName">
      <el-input v-model="form.fieldName"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

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

export default defineComponent({
  props: {
    modelValue: Object,
    name: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const form = ref(props.modelValue);

    const formRules = {
      fieldName: [{ required: true, message: '请输入字段名', trigger: 'blur' }],
      // ...
    };

    const validate = (callback: (valid: boolean) => void) => {
      if (form.value.$refs.form) {
        form.value.$refs.form.validate(callback);
      } else {
        callback(true); // 如果子组件没有 form，直接通过
      }
    };

    emit('update:modelValue', form.value);

    return {
      form,
      formRules,
      validate,
    };
  },
});
</script>

在这个示例中，ParentComponent.vue 使用 v-for 动态创建子组件，每个子组件（ChildComponent.vue）包含一个带有必填字段的简单表单。父组件中的 save 方法遍历所有子组件，使用 validateChildForm 方法验证它们的表单，并在任何表单无效时停止验证。

这个示例使用了Vue 3、Element Plus和TypeScript。请确保你的项目中已经安装了必要的TypeScript和Vue 3依赖。