vue父组件调用多个子组件的表单验证

389 阅读1分钟

Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例, 那个输入的所有 promise 的 resolve 回调的结果是一个数组。这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束,或者输入的 iterable 里没有 promise 了的时候。它的 reject 回调执行是,只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误,并且 reject 的是第一个抛出的错误信息。

// 子组件1
/**
 * 数据校验
 */
validateData(callback) {
  let that = this;
  this.$refs["formRef"].validate((valid) => {
    callback({
      valid:valid,
      data:this.formData
    } );
  })
// 子组件2
/**
 * 数据校验
 */
validateData(callback) {
  let that = this;
  this.$refs["formRef"].validate((valid) => {
    callback({
      valid:valid,
      data:this.formData
    } );
  })
// 父组件调用子组件的表单验证和数据
let obj = {
data1: {},
data2: {},
};
let promise1 = this.$refs.child1.validateData((valid) => {
debugger;
if (valid.valid) {
  obj.data1 = valid.data;
  Promise.resolve(valid.data);
}
});
let promise2 = this.$refs.child2.validateData((valid) => {
debugger;
if (valid.valid) {
  obj.data2 = valid.data;
  Promise.resolve(valid.data);
}
});


// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Promise.all([promise1, promise2]).then(() => {
    console.log(obj, "obj");
    debugger;
});