App.vue是父组件，当点击【提交】按钮时，应该调用其ElmentUI的this.$refs[formName].validate方法去验证各个子组件中的表单。但是需要注意的是，该方法是一个异步方法。
所以这里封装了一个getFormPromise去生成Promise对象，并使用Promise.all去并行调用返回最终的校验结果数组。
<template> <div> <h1>App.vue</h1> <div> <!-- PersonForm.vue --> <person-form ref="personFormComp"/> <!-- AdsForm.vue --> <ads-form ref="adsFormComp"/> </div> <el-button @click="submitForm" type="primary"> 提交 </el-button> </div> </template> <script> import PersonForm from '@/components/PersonForm'; import AdsForm from '@/components/AdsForm.vue'; export default { components: { 'person-form': PersonForm, 'ads-form': AdsForm, }, methods: { submitForm() { // 获取到组件中的form const personForm = this.$refs.personFormComp.$refs.personForm; const adsForm = this.$refs.adsFormComp.$refs.adsForm; // 使用Promise.all去校验结果 Promise.all([personForm, adsForm].map(this.getFormPromise)).then(res => { const validateResult = res.every(item => !!item); if (validateResult) { console.log('两个表单都校验通过'); } else { console.log('两个表单未校验通过'); } }) }, getFormPromise(form) { return new Promise(resolve => { form.validate(res => { resolve(res); }) }) } } } </script> <style> .app { border: 1px solid #ccc; padding: 20px; width: 900px; } .app .submit-btn { margin-top: 40px; } .forms-container { display: flex; } </style>