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>

子组件：

<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>