场景：点击提交的时候，需要验证三个子组件（图片来源于网络）

实现：

父组件：使用Promise 以及Promise.all

<template>
  <div class='order-book'>
    <!-- 共有属性 -->
    <PublicAttr ref='public'></PublicAttr>
    <!-- 用户信息 -->
    <UserInfo ref='user'></UserInfo>
    <!-- 订单信息 -->
    <OrderInfo ref='order'></OrderInfo>
    <div class="btn">
      <el-button type="primary" @click="submitForm" class='submit'>提交</el-button>
    </div>
  </div>
</template>

<script>
import PublicAttr from './components/OrderBook/PublicAttr.vue'
import UserInfo from './components/OrderBook/UserInfo.vue'
import OrderInfo from './components/OrderBook/OrderInfo.vue'
export default {
  components: {
    PublicAttr,
    UserInfo,
    OrderInfo
  },
  data () {
    return {
      reqData: {}
    }
  },
  methods: {
    // 提交
    submitForm () {
      const userInfo = new Promise((resolve, reject) => {
        return this.$refs['user'].$refs['UserInfo'].validate((valid) => {
          if (valid) {
            resolve()
          }
        })
      })
      const orderInfo = new Promise((resolve, reject) => {
        return this.$refs['order'].$refs['OrderInfo'].validate((valid) => {
          if (valid) {
            resolve()
          }
        })
      })
      const serviceInfo = new Promise((resolve, reject) => {
        return this.$refs['public'].$refs['PublicInfo'].validate((valid) => {
          if (valid) {
            resolve()
          }
        })
      })
      Promise.all([userInfo, orderInfo, serviceInfo]).then(()=>{
        const publicData = this.$refs['public'].getData()
        const userData = this.$refs['user'].getData()
        const orderData = this.$refs['order'].getData()
        const reqData = Object.assign(publicData, userData, orderData)
        console.log(reqData)
      }).catch(() => {
        console.log('submit error')
      })
    }
  }
}
</script>

<style>

</style>

每个子组件都有一个getData方法～来返回表单数据供父组件调用～this.orderInfo 是表单数据～

getData () {
  return this.orderInfo
}

all～