vue element ui 在父组件中控制子组件表单验证

子组件需要定义 validate方法 这个名字可以随意，建议form组件验证名字一致validate

这样使用时，我们自己定义的组件验证方法也和form组件验证方法一致，使用起来也更方便

说白了就是子组件内部提供一个验证方法 ，父组件验证子组件的表单就是调用子组件的验证方法

methods: {
    validate(callback){
      //这个form是子组件内部el-form 的ref="form"
      this.$refs.form.validate((valid) => {
        callback(valid);
      });
    }
  }

父页面引入子组件 添加ref

在父页面验证子组件表单时和验证正常的el表单一样

//这个form1是子组件标注的ref="form1"
//这个validate 就是我们在自组件定义validate方法
this.$refs.form1.validate((valid) => {
  if(valid) {
    //验证通过
  }
});

如果需要验证多个表单

const p1 = new Promise((resolve, reject) => {
      this.$refs.form1.validate((valid) => {
        if (valid) resolve();
      });
    });

    const p2 = new Promise((resolve, reject) => {
      this.$refs.form2.validate((valid) => {
        if (valid) resolve();
      });
    });


    Promise.all([p1, p2]).then(() => {
        //全部验证通过就会走这里
    });