Vue自定义组件使用Element-ui表单校验

一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：

// 栗子.vue
<template>
    <el-form :model="formData" :rule="rules" ref="formRef">
        <el-form-item prop="inputValue">
            <el-input v-model="formData.inputValue"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
   
    .......省略
    data() {
   
        return {
   
            formData: {
   
                inputValue: ''
            },
            rules: {
   
                inputValue: [
                    {
    required: true, message: '请输入活动名称', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
   
        submit() {
   
            this.$refs.formRef.validate((valid) => {
   
              if (valid) {
   
                alert('submit!');
              } else {
   
                console.log('error submit!!');
                return false;
              }
            });
        }
    }
}
</script>   

但是当我们在<el-form-item>组件中添加自定义的组件时，你还继续按照上面这中用法是无效的，翻阅element-ui源码就能发现其中原因。

element-ui的form组件的表单验证是由<el-form-item>组件配合触发的，在el-form-item中的源码如下：

// el-form-item源码
mounted() {
   
    if (this.prop) {
   
        this.dispatch('ElForm&