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动态绑定组件子父组件多表单验证功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


您可能感兴趣的文章:vue父组件向子组件动态传值的两种方法vue-router2.0 组件之间传参及获取动态参数的方法详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)vue中用动态组件实现选项卡切换效果vue动态组件实现选项卡切换效果vuejs动态组件给子组件传递数据的方法详解Vuejs第十二篇之动态组件全面解析Vue.js动态组件解析vue子父组件通信的实现代码详解vue表单验证组件 v-verify-plugin

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据谢大变量
tags: 组件,gt,value,vue,callback,else,动态,num,return,lt,new,验证,加载
分页:12
转载请注明
本文标题:vue动态绑定组件子父组件多表单验证功能的实现代码
本站链接:https://www.codesec.net/view/576509.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(189)