vue动态绑定组件子父组件多表单验证功能的实现代码

// 给下拉框绑定下拉列表的索引<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>

// 加载组件：每次下拉框监听则给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('错误')    }  },