VUE+Elment UI表单组件式渲染，必填验证失败

error message：

（输入信息后，还是验证失败,并不是简单错误【form-item对应prop写错类似】）

code:
form父组件

<el-form ref="card_form_ref" :model="card.values" :rules="card.rules" size="small">
       <el-form-item v-for="(field, i) in card.fields" :key="i" :prop="field.key"
            :label="field.name"
            label-width="120px">
            <!-- 渲染字段 begin -->
            <component :is="field.renderer" :option="field"
                :mode="'EDIT'" :ref="field.key" @on-result-change="onResultChange"/>
            <form-tips :tip="field.tip" v-if="field.tip"></form-tips>
            <!-- 渲染字段 end -->
        </el-form-item>
    </el-form>

code :子组件（渲染各个form字段）

<template>
    <div>
        <el-input   v-model="value" size="small"/>
    </div>
</template>

原因：代码本身是没什么问题，这是elment ui watch回传事件需要处理

解决：
子组件 code

<script>
import emitter from 'element-ui/src/mixins/emitter';   //引入这个组件【重点】
export default {
    mixins: [emitter],
    props: {
        mode: String,
        option: Object
    },
    data() {
        return {
            valid: true,
            value: this.option.value,
            
        };
    },
    mounted(){
    },
    methods: {
    },
    //监听value的变化，然后会触发一个change事件，
    //并且根据mixin中的emitter增加的dispatch来向父组件派发事件。【重点】
    watch: {    //作监听处理
        value(news, old) {
            this.option.field.value = news
            this.$emit("on-result-change")  
            this.dispatch('ElFormItem', 'el.form.change', news);
        },

    },
    computed: {
    }
}
</script>

父组件 code

onResultChange(val){
        this.tabs.forEach((item,index)=>{
             if(item.fields){
                 item.fields.forEach((field,i)=>{
                     field.value = field.field.value
                     item.values[field.key] = field.field.value
                 })
             }
         })
     }
     //父组件的这个方法处理子组件的emit提交事件，刷新当前输入值

参考资料：https://www.jianshu.com/p/6aeee09a3684