怎么在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://cdiso.cn/article/jpcje.html