前言
上篇文字我们介绍了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>