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基本对象
Jan 11 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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下正则来匹配dede模板标签的代码
2010/08/21 PHP
设定php简写功能的方法
2019/11/28 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
React组件refs的使用详解
2018/02/09 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
python 以16进制打印输出的方法
2018/07/09 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
经济国贸专业求职信
2014/06/18 职场文书
改革共识倡议书
2014/08/29 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
委托证明范本
2014/11/25 职场文书
2015双创工作总结
2015/07/24 职场文书
大队委员竞选稿
2015/11/20 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
python利用while求100内的整数和方式
2021/11/07 Python