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 相关文章推荐
window.open打开页面居中显示的示例代码
Dec 27 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
页面点击小红心js实现代码
May 26 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
基于JS判断对象是否是数组
Jan 10 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript类型转换示例
2014/04/29 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
python学生信息管理系统
2018/03/13 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python动态视频下载器的实现方法
2019/09/16 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
浅析Python的命名空间与作用域
2020/11/25 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
颁奖典礼主持词
2014/03/25 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
晚会闭幕词
2015/01/28 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers