怎么在vue中实现动态绑定组件子父组件多表单验证功能

本篇文章给大家分享的是有关怎么在vue中实现动态绑定组件子父组件多表单验证功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

动态加载子组件：component

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

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

// 加载组件：每次下拉框监听则给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中实现动态绑定组件子父组件多表单验证功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。