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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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中的魔术方法总结和使用实例
2015/05/11 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python实现多属性排序的方法
2018/12/05 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
质检员岗位职责
2013/12/17 职场文书
请假条怎么写
2014/04/10 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
安全生产先进个人总结
2015/02/15 职场文书
亮剑观后感300字
2015/06/05 职场文书
小学校园广播稿
2015/08/18 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android