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>
<style lang='less'>
</style>