怎么在vue中实现动态绑定组件子父组件多表单验证功能-创新互联
本篇文章给大家分享的是有关怎么在vue中实现动态绑定组件子父组件多表单验证功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联是一家专注于成都网站制作、做网站、外贸营销网站建设与策划设计,平山网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:平山等地区。平山做网站价格咨询:028-86922220动态加载子组件:component
// 给下拉框绑定下拉列表的索引
引入组件后放到一个数组内,通过控制对应的索引达到加载组件的目的
// 加载组件:每次下拉框监听则给changValue新赋值,如果下拉options的value从0开始则绑定组件时不用-1
子父组件表单一起验证:
按钮放在父组件内:
子组件:自定义验证规则
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中实现动态绑定组件子父组件多表单验证功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站标题:怎么在vue中实现动态绑定组件子父组件多表单验证功能-创新互联
分享URL:http://myzitong.com/article/jpcje.html