elementUI自定义表单验证，父组件控制多个子组件表单验证

//基础信息子组件
<template>
  <div class='BasisInfo'>
    <div class="basis-info-wrap">
      <div class="basis-info-title">基础信息</div>
      <el-form ref="ruleForm"
               size="mini"
               :model="ruleForm"
               :rules="rules"
               label-width="250px">
        <el-form-item label="店铺logo"
                      prop='shopLogo'>
          <div class="upload-wrap content">
            <upload-file @upload-ok="uploadOk"
                         :class="{'el-input__inner':!logo}"
                         v-if="!ruleForm.shopLogo"></upload-file>
            <ul class="upload-img-list"
                v-else>
              <li class="item">
                <sup class="del"
                     @click="delLicenseImage"></sup>
                <img :src="ruleForm.shopLogo"
                     alt="">
              </li>
            </ul>
            <span class="upload-rule"><span @click="$emit('showLogoRule','logo')">店铺logo上传规则</span></span>
          </div>
          <div class="remind">
            请上传格式为(.gif,.png,.jpg,.jpeg)、大小在1M以下、规格为<span class='logo-size-remind'>宽高为144x144像素</span>的图片
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import uploadFile from 'vues/components/uploadFile.vue';
const logoValid = (rule, value, back) => {
  if (!value) {
    back(new Error('店铺logo不能为空，请重新确认'));
  } else {
    back();   //这里记得调用back函数，否则父组件的getFormPromise无法正常调用validate里面函数
  }
};

const _data = {
  logo: false,
  rules: {
    shopLogo: [
      {
        required: true,
        validator: logoValid,
        trigger: 'change'
      }
    ],
  }
};

export default {
  name: 'BasisInfo',
  components: { uploadFile },
  filters: {},
  props: {
    ruleForm: {
      type: Object,
      default() {
        return {
          shopName: '', // 店铺名称
          shopLogo: '', // 店铺Logo
          shopMainCategory: '', // 店铺主营分类
          shopMainBrand: '', // 店铺主品牌
          shopDesc: '' // 店铺简介
        };
      }
    }
  },
  data() {
    return _data;
  },
  computed: {
    uploadUrl() {
      return window.UPLOADSERVER;
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    uploadOk(data) {
      console.log(data);
      this.ruleForm.shopLogo = data.Data;
    },
    delLicenseImage() {
      this.ruleForm.shopLogo = '';
    },
    beforeAvatarUpload(file) {
    }
  }
};

//联系方式子组件
<template>
  <!-- 联系方式 -->
  <div class='ContactWay'>
    <div class="contact-way-wrap">
      <div class="basis-info-title">联系方式</div>
      <el-form ref="ruleForm"
               size="mini"
               :model="ruleForm"
               :rules="rules"
               label-width="250px">
        <el-form-item label="紧急联系人"
                      prop="emergencyContact">
          <el-input v-model="ruleForm.emergencyContact"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人手机"
                      prop="emergencyContactPhone">
          <el-input v-model="ruleForm.emergencyContactPhone"></el-input>
        </el-form-item>
        <!-- /bc/baseConfig/shopInfo 这里有地址接口 -->
        <el-form-item label="联系人地址">
          <div class="address-wrap">
            <el-cascader v-model="value"
                         :options="options"
                         @change="handleChange"></el-cascader>
          </div>
          <el-input type="textarea"
                    class="textarea"
                    placeholder="请输入详细地址"
                    v-model="ruleForm.emergencyAddress"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
const _data = {
  rules: {
    emergencyContact: [
      {
        required: true,
        message: '店铺简介不能为空，请重新确认',
        trigger: 'blur'
      }
    ],
    emergencyContactPhone: [
      {
        required: true,
        message: '紧急联系人不能为空，请重新确认',
        trigger: 'blur'
      }
    ]
  }
};
export default {
  name: 'ContactWay',
  components: {},
  filters: {},
  props: {
    ruleForm: {
      type: Object,
      default() {
        return {
          emergencyContact: '', // 紧急联系人
          emergencyContactPhone: '', // 紧急联系电话
          emergencyAddress: '' // 详细地址
        };
      }
    }
  },
  data() {
    return _data;
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>

//父组件
<template>
      <!-- 基础信息 开始 -->
      <basis-info @showNameRule="showRule"
                  @showIntroduceRule="showRule"
                  @showLogoRule="showRule"
                  :ruleForm="submitParams"
                  ref="basisInfo" />
      <!-- 基础信息 结束 -->
      <!-- 联系方式 开始 -->
      <contact-way :ruleForm="submitParams"
                   ref="ContactWay" />
      <!-- 联系方式 结束 -->
</template>

<script>
...
methods:{
   // 提交店铺信息
    async submitStoreInfo() {
      const basisInfoForm = this.$refs.basisInfo.$refs.ruleForm;
      const contactWayForm = this.$refs.ContactWay.$refs.ruleForm;
      Promise.all(
        [basisInfoForm, contactWayForm].map(this.getFormPromise)
      ).then(async res => {
        const result = res.every(n => n);
        if (result) {
          console.log('表单验证通过');
        } else {
          console.log('表单验证不通过');
        }
      });
    },
    //验证不同组件的表单
    getFormPromise(form) {
      return new Promise(resolve => {
      //传入callback函数
        form.validate(res => {
          resolve(res); 
        });
      });
    }
}
...
</script>