vue2 子组件校验未通过如何通知父组件
博客专区 > 黄威 的博客 > 博客详情
vue2 子组件校验未通过如何通知父组件
黄威 发表于2周前
vue2 子组件校验未通过如何通知父组件
  • 发表于 2周前
  • 阅读 108
  • 收藏 5
  • 点赞 0
  • 评论 1

华为云·免费上云实践>>>   

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

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

标签: vue2 vee-validate
共有 人打赏支持
粉丝 3
博文 16
码字总数 5160
评论 (1)
一号男嘉宾
楼主有时间写个大文件分片上传的哇
×
黄威
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: