elementui 多组件表单验证

 

最近在做管理后台，vue2.0基于elementui框架进行开发。

elementui的api中表单验证都是单个vue文件的验证。而我的保存按钮放在了父组件了，验证对象为三个子组件
我的灵机一动 想到了解决方法 哈哈哈
1.在三个子组件分别写一个方法用于验证当前表单

　　incrementTotal(){
        let formName="personSetting"
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$emit('submitType',["subject",true])
            }else{
                this.$emit('submitType',["subject",false])
                return false;
            }
        });
    }

注释：{
        1.formName="personSetting" 是表单的ref
        2.验证成功触发父组件函数并把子组件标示“teacher”和成功的状态true/false 传给父组件
    }

    
2.父组件

 <subject ref="subjectchildMethod"  @submitType="getSubmitType" ></subject> //引入子组件
　　//父组件中的方法
    getSubmitType(type){//获取验证子组件表单的通过状态
        if(type[0]=="subject"){
            this.teacherSubmit=type[1]
        }
    },
    savePersonData(){//提交的方法
        this.$refs.subjectchildMethod.incrementTotal();//触发子组件的验证
        if(this.teacherSubmit){//验证通过啦
            //可以提交你的数据啦
        }
    }