el-form表单组件校验

• 子组件校验表单方法

// 保存前的校验
    async validForm () {
      return new Promise((resolve, reject) => {
        return this.$refs['baseForm'].validate(valid => {
          if (valid) {
            resolve(this.baseForm)
          }
        })
      })
    },

• 父组件调用

const baseForm = await this.$refs?.baseForm.validForm()

• 具体实现

father.vue

<Son ref="baseForm"/>

<script>
export default {
    name: "father",
    data() {
        return {
        baseForm:{}
        };
    },
  async created() {
            this.baseForm  = await this.$refs?.baseForm.validForm()
  }
};
</script>

son.vue

<el-form :model="baseForm" :rules="rules" ref="baseForm" label-width="100px" class="baseForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="baseForm.name"></el-input>
  </el-form-item>
</el-form>
  
<script>
export default {
    name: "son",
    data() {
        return {
        baseForm:{
           name:''
        },
        rules:{
           name:[{ required: true, message: '请填写', trigger: 'blur' }]
        }
        };
    },
  method:{
  // 保存前的校验
    async validForm () {
      return new Promise((resolve, reject) => {
        return this.$refs['baseForm'].validate(valid => {
          if (valid) {
            resolve(this.baseForm)
          }
        })
      })
    },
  }
};
</script>