本篇文章给大家分享的是有关怎么在vue中实现动态绑定组件子父组件多表单验证功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站建设、市北网络推广、成都微信小程序、市北网络营销、市北企业策划、市北品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供市北建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
动态加载子组件：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中实现动态绑定组件子父组件多表单验证功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
名称栏目：怎么在vue中实现动态绑定组件子父组件多表单验证功能
网站网址：
http://bjjierui.cn/article/jgggpi.html
