前言

上篇文字我们介绍了vue自定义组件并使用v-mode实现双向绑定，当我们做form组件的时候经常要使用表单校验，但在使用ElementUi表单校验时，有时候校验v-model不能即时生效，如下图：

其中子组件为一个输入框，父组件使用ElementUi校验子组件输入的值，我们看到当输入框失焦的时候不能即时校验，要提交可以。

核心解决代码

子组件加上@input="validateField('fatherValue')" ，同时增加 validateField方法，进行手动校验。

 <el-form-item label="子组件输入框：" prop="fatherValue">
     <childComponent v-model="ruleForm.fatherValue" @input="validateField('fatherValue')"/>
 </el-form-item>
 .............
 <script>
	methods:{
       //手动再验证
       validateField(type) {
         this.$refs.ruleForm.validateField(type);
       },
       ............
	}
 </script>

解决后效果如下：

完整代码

父组件

<template>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
            <h3>vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法</h3>
            <div>父组件fatherValue：{{ruleForm.fatherValue}}</div>
            
            <el-form-item label="子组件输入框：" prop="fatherValue">
                <childComponent v-model="ruleForm.fatherValue" @input="validateField('fatherValue')"/>
            </el-form-item>
            
            <el-form-item>
                <el-button size="mini" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import childComponent from './childComponent.vue'

    export default {
        name: 'app',
        data() {
            return {
                ruleForm: {
                    fatherValue: ''
                },
                rules: {
                    fatherValue: { required: true, message: '请输入字符', trigger: 'blur' },
                }
            }
        },
        methods: {
            
            //手动再验证
            validateField(type) {
              this.$refs.ruleForm.validateField(type);
            },
            
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('提交成功!');
                    }
                });
            },
            
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        components: {
            childComponent
        },
    }
</script>

子组件

<template>
    <div>
        <input type="text" v-model="childValue" @blur="returnBackFn">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                childValue: "",
            }
        },
        watch: {
            //监听value变化（slect控件不是必要，暂时不明）
            value(newValue, oldValue) {
                this.childValue = newValue;
            }
        },
        props: {
            //value是默认双向绑定值，必须在props里面声明
            value: String
        },
        methods: {
            returnBackFn() {
                //input是默认双向绑定事件，select控件也可以用input给父组件传递数据
                this.$emit('input', this.childValue)
            },
        },
    }
</script>