Vue element-ui父組件控制子組件的表單校驗

方法一：
父組件代碼：

<template>
<div>
	<child-form    ref="childRules" :addForm="addForm" >   </child-form>
	
	 <el-button @click="saveForm()" size='medium'>保 存</el-button>
	 
</div>
</template>
<script>
	import childForm from './childForm'
	export default {
		data(){
			return {
					addForm: {  
				      name:"",
			          desc: ""
			        },
				}
     		},
     		//組件引用
		    components: { 
		      childForm 
		    },
		    methods:{
				 //保存校驗
			      saveForm() { 
			        let flag = this.$refs['childRules'].validateForm(); 
			        if(flag){
			          console.log(this.addForm);
			
			
			        }else{
			            this.$message.error('保全信息不完整，請繼續填寫完整');
			        } 
			      },
			}
	}
</script>
<style></style>

//子組件代碼

 <!--  -->
<template>
  <div class="form-content">
    <el-form :model="addForm" :inline="true"   :rules="formRules" ref="ruleForm"
      size='mini' label-width="120px" class="form-mini">
      <el-form-item label="名字" prop='name'>
     		<el-input v-model="addForm.name" ></el-input>
      </el-form-item>  
    </el-form>
  </div>
</template>

<script> 
  export default {
    name: '', 
    props: {
      addForm: { 
        type: Object,
        default: function () {
          return { 
          } 
        }
      } 
    },
    data() {
      //這裏存放數據
      return { 
        formRules: {
          name: [{
            required: true,
            message: '請輸入',
            trigger: 'blur'
          }] 
        },  
      };
    },
    //監聽屬性 類似於data概念
    computed: {},
    //監控data中的數據變化
    watch: {},
    //過濾器
    filters: {},
    //方法集合
    methods: { 
      //子組件校驗，傳遞到父組件
      validateForm () {
        let flag = null
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        })
        return flag
      }
    } 
  }

</script>
<style lang='less'> 
</style>