// 組件1 <Component1 ref="ref1"></Component1>
<template>
    <div>
        <el-form ref="form1"></el-form>
    </div>
</template>
// 組件2 <Component2 ref="ref2"></Component2>
<template>
    <div>
        <el-form ref="form2"></el-form>
    </div>
</template>
// 組件3 <Component3 ref="ref3"></Component3>
<template>
    <div>
        <el-form ref="form3"></el-form>
    </div>
</template>

<Component1 ref="ref1"></Component1>
<Component2 ref="ref2"></Component2>
<Component3 ref="ref3"></Component3>
<button @click="onSave">保存</button>

<script>
...
methods: {
    onSave(){
        let formData1 = this.$refs.ref1.$refs.form1;
        let formData2 = this.$refs.ref2.$refs.form2;
        let formData3 = this.$refs.ref3.$refs.form3;
        Promise.all([formData1, formData2 ,formData3].map(this.getFormPromise)).then(res=>{
            const validateResult = res.every((item) => !!item);
               if (validateResult) {
                 // 校驗通過，獲取各個組件中的表單內(nèi)容，提交后臺    
                }else {
                    this.$message.warning('必填內(nèi)容未填寫');
                }
            })
    },
    getFormPromise(form) {
            return new Promise((resolve) => {
                form.validate((res) => {
                    resolve(res);
                });
            });
        },
}
</script>