vue 中父组件获取表单子组件验证过后的数据

场景：开发中，父组件引入一个表单组件，例如点击父组件中的一个“保存”按钮，我们需要获取子组件的表单数据，而且表单有验证。

子组件中的 html 的表单代码：

<el-form
  :model="form"
  :rules="rules"
  ref="formName"
  labelWidth="100px"
  :validate-on-rule-change="true"
></el-form>

其中： :model="form" 中的 form 为表单绑定的数据。

子组件的表单数据中 methods 中需要添加：

methods:{
  formValidate() {
    return new Promise((resolve, reject) => {
      this.$refs.formName.validate((valid) => {
        if (valid) { 
          resolve(this.form);
        } else {
          setTimeout(() => {
            reject("error");
          });
        }
      });
    });
  },
}

父组件中，比如我点击了“保存”按钮之后，调用一个 handleSave 的方法，在 methods 中添加：

handleSave(){
  // 其中 formTemplate 是父组件中引入表单组件的时候，定义的 ref 值
  this.$refs.formTemplate[0].formValidate()
    .then(formRes=>{
      //这里就可以处理表单验证过后的代码逻辑了
    })
    .catch(
      err=>{}
    )
}