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){//驗證通過啦
            //可以提交你的數據啦
        }
    }