文档章节

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

黄威
 黄威
发布于 2017/11/14 22:52
字数 460
阅读 125
收藏 7
点赞 0
评论 1

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

© 著作权归作者所有

共有 人打赏支持
黄威
粉丝 9
博文 35
码字总数 16517
作品 0
武汉
程序员
加载中

评论(1)

一号男嘉宾
一号男嘉宾
楼主有时间写个大文件分片上传的哇
Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消...

mdiep ⋅ 05/13 ⋅ 0

来点干货:如何基于vue2写一套UI库

又到一年年底,最近在做项目总结,抽了点时间,把公司产品做了规划,把组件整合为Vue UI库(我们用Vue2+),于是造了个轮子,其中包括 基础组件 和 应用组件,目前 组件 和 文档 在不断完善中。...

吖面吖面吖面 ⋅ 2017/12/21 ⋅ 0

微信小程序之表单校验

微信小程序之表单校验 亚里士朱德的博客2017-08-2114 阅读 表单校验微信 小程序SDK版本 1.4 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是 表单校验 ,没有之一。原因如...

亚里士朱德的博客 ⋅ 2017/08/21 ⋅ 0

《React-Native系列》30、 RN组件间通信

今天我们来说一说RN的组件之间的通信。 ReactNative的核心之一是他的组件化,组件化的核心是组件之间的通信。 组件是有层级来区分的,譬如:父组件 子组件。 我们先来讲解一个例子。 这个是我...

hsbirenjie ⋅ 2016/09/13 ⋅ 0

# Vue组件二-事件反馈 - 子组件向父组件发送消息,父组件监听消息

Vue组件二-事件反馈 - 子组件向父组件发送消息,父组件监听消息 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值...

mdiep ⋅ 05/13 ⋅ 0

Vue.js基本语法的介绍

介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整...

chenhao_ch ⋅ 2017/11/29 ⋅ 0

Vue.js基本语法的介绍

介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整...

Yomut ⋅ 2016/07/29 ⋅ 0

SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu ⋅ 2017/06/19 ⋅ 2

Vue组件实战

最近看了下Vue组件的相关知识,除了官网也推荐这篇博客http://www.cnblogs.com/keepfool/p/5637834.html,但是这篇博客中用的是v1.0.25,我就用最新的v2.4.4来模仿下文中的例子,也一起谈一谈下...

juexingzhe ⋅ 2017/12/25 ⋅ 0

如何优雅的设计 React 组件

作者:Nicolas 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么大家会觉得 ...

iKcamp ⋅ 2017/11/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 56分钟前 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部