<!-- 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依赖。