vue2 子组件校验未通过如何通知父组件

如上图,输入框在子组件(ServiceItemInputPanel)中

输入框只能输入数字,1-9999,如果校验失败,应该让提交按钮(右边标号2)置灰

解决方案:

1,使用 vee-validate框架

官网地址:http://vee-validate.logaretm.com/api.html#directive

子组件中:

<input v-validate="'required|numeric|multiple'" data-vv-as="购买数量" data-vv-validate-on="input"  @input="modifyCounter($event.target.value);validate2($validator,sharedState)" name="multiple2" :value="sharedState.multiple" type="text" >

校验属性说明:

v-validate 表示校验的格式,上例中要求必填,是数字,而且还有自定义的校验规则:multiple

data-vv-as 表示错误信息中的提示 title, 即"姓名不能为空"中的姓名.

data-vv-validate-on 表示触发校验的时机,上例中在输入过程中即时校验,说白了,就是 keyup 事件触发校验.

2,在输入过程中会调用validate2 方法,进行事件派发

methods: {     validate2: throttle(function ($validator2,sharedState) {       console.log('updated 111'); //      console.log('this', this);       $validator2.validate('multiple2').then((validateFlag) => {         console.log('validateFlag', validateFlag)         sharedState.bus.$emit('validatemultiple',validateFlag);       }, err => {         console.log('校验报错!!!!!')         console.log(err)       });            },500)   }

把校验的结果通过 vue 的 eventbus 进行通知

3,在父组件中注册事件

在钩子事件created中进行注册:

created: function () {     //做一些初始化操作     if (!this.placeorderData.userInfo){       this.placeorderData.userInfo = {}     }     this.sharedState.bus.$on('validatemultiple',this.validateMultiple)   }

注意:

1,

data-vv-validate-on="input"

不能少,不要以为在@ input 事件中绑定了校验的方法就行.

为什么呢?

如果缺少上述语句,那么,输入过程中虽然会调用validate2方法,但是校验框架vee-validate 其实并没有同步输入框的值.

 data-vv-validate-on="input" 表示在@ input 事件中同步输入框的值到vee-validate框架中

2.节流函数throttle 中使用 bind(this)不好使,因运行时的 this 并不是此时绑定的 this