父組件代碼：
<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>