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

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

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

父页面引入子组件 添加ref

<child-form  ref="form1" :addForm="addForm" >   </child-form>

在父页面验证子组件表单时和验证正常的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(() => {
        //全部验证通过就会走这里
    });

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