vue父组件校验子组件表单（子组件表单可动态删除或添加）

需求

下图表单为子组件，点击右下角添加或右上角减号可以添加或删除对应表单

解决办法 校验方法在子组件写 父组件点击提交时获取子组件实例 子组件通过回调函数判断是否执行下一步

1.父组件点击下一步，执行@click="validate"函数

<el-button size="small" type="primary" class="g_ml20" @click="validate">下一步</el-button>

2.父组件获取子组件实例，子组件方法进行校验
----2.1子组件绑定ref属性

----2.2子组件校验表单并判断是否检验通过

//父组件
validate() {
// 获取子组件实例 this.$refs['appCli']   并执行子组件中的validateFrom()方法，传next函数给子组件
    this.$refs['appCli'].validateForm(() => {
      this.next();
    })
  })
},
next() {
	// 校验通过后下一步操作的逻辑
}

子组件就是一个简单的表单校验方法，通过elementUI属性校验表单完整性

//子组件

//子组件接收callback为父组件传过来的next()方法
validateForm(callback) {
    let flag = true;
    //开始表单校验
    this.$refs.ruleForm.forEach(x => {
        x.validate(valid => {
            if (!valid) {
                this.$refs["ruleForm"].clearValidate();
                this.$message.error('请完成应用信息输入!')
                //如果表单校验不通过，flag为false
                flag = false;
            }
        })
    })
    // 如果flag为true，则执行callback()
    if (flag) {
        callback();
    }
},

END

没解决的时候尝试很多方法

在父组件直接获取子组件实例进行校验的话 只能校验第一个表单，而后面添加的表单并不会校验。
在子组件进行校验把校验结果传递给父组件（方法可行），但如果父组件逻辑比较多，会很麻烦。
最后用这个方法完美解决问题，简单清晰明了