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 相关文章推荐
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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过滤危险html代码
2008/08/18 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
5 cool javascript apps
2007/03/24 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python @classmethod 的使用场合详解
2019/08/23 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python 项目目录结构设置
2020/02/14 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
社团成立邀请函
2014/01/08 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Javascript webpack动态import
2022/04/19 Javascript