vue动态绑定组件子父组件多表单验证功能的实现代码


Posted in Javascript onMay 14, 2018

vue动态绑定组件子父组件多表单验证功能的实现代码

前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护。

Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。

vue动态绑定组件子父组件多表单验证功能的实现代码

如图: selects文件夹中,index只负责公共数据(当然公共数据也可以写在其他文件,只留一个入口文件),而comp文件夹中的几个组件则通过动态加载。

动态加载子组件:component

// 给下拉框绑定下拉列表的索引
<el-select v-model="value" placeholder="请选择" style="float:left" @change="selectNum(value)">
     <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
     </el-option>
</el-select>

引入组件后放到一个数组内,通过控制对应的索引达到加载组件的目的

vue动态绑定组件子父组件多表单验证功能的实现代码

// 加载组件:每次下拉框监听则给changValue新赋值,如果下拉options的value从0开始则绑定组件时不用-1
<component :is="componentName[changValue - 1]" ref="subjectChild" @isSubmit="getSubmit"></component>

子父组件表单一起验证:

按钮放在父组件内:

子组件:自定义验证规则

data(){
  const num = (rule, value, callback) => {
    let num = /^\d+$/
    if(!value){
      return callback(new Error('数量不能为空'))
    }else if(!num.test(value)){
      return callback(new Error('数量必须为数字'))
    }else{
      callback()
    }
  }
  const price = (rule, value, callback) => {
    let num2 = /^\d+$/
    if(!value){
      return callback(new Error('单价不能为空'))
    }else if(!num2.test(value)){
      return callback(new Error('单价必须为数字'))
    }else{
      callback()
    }
  }
  return{
    // 验证
    apple:{
      num: '',
      price: '',
    },
    reg:{
      num: [
        { validator: num, trigger: 'blur' }
      ],
      price: [
        { validator: price, trigger: 'blur' }
      ]
    }
  }
// 验证
  submitForm(){
    this.$refs.apple.validate((valid) => {
      if(valid){
        this.$emit('isSubmit',["subject",true])
      }else{
        this.$emit('isSubmit',["subject",false])
        return false
      }
    })
  }

父组件:

// 获取子组件状态
  getSubmit(type){
    this.isRule = type[1]
  },
// 公共数据验证
  submitForm2(){
    // 如果选中了子组件
    if(this.changValue){
      this.$refs.subjectChild.submitForm()
    }
    let _this = this
    let p1 = new Promise((resolve, reject) => {
      _this.$refs.ruleForm.validate((valid) => {
        if(valid){
          resolve()
        }
      })
    })
    if(_this.isRule){
      Promise.all([p1]).then(() => {
        console.log('正确')
      })
      .catch(() => {
        console.log('错误')
      })
    }else{
      console.log('错误')
    }
  },

总结

以上所述是小编给大家介绍的vue动态绑定组件子父组件多表单验证功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
AngularJS入门之动画
Jul 27 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
javascript中的隐式调用
Feb 10 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
vue引入js数字小键盘的实现代码
May 14 #Javascript
vue移动端路由切换实例分析
May 14 #Javascript
对node.js中render和send的用法详解
May 14 #Javascript
利用vscode调试编译后的js代码详解
May 14 #Javascript
vue的toast弹窗组件实例详解
May 14 #Javascript
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
thinkphp缓存技术详解
2014/12/09 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python 元类使用说明
2009/12/18 Python
Python中List.count()方法的使用教程
2015/05/20 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
超越自我演讲稿
2014/05/21 职场文书
会议主持词开场白
2015/05/28 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Django基础CBV装饰器和中间件
2022/03/22 Python