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(() => {
        //全部驗證通過就會走這里
    });