- 子组件校验表单方法
// 保存前的校验
async validForm () {
return new Promise((resolve, reject) => {
return this.$refs['baseForm'].validate(valid => {
if (valid) {
resolve(this.baseForm)
}
})
})
},
- 父组件调用
const baseForm = await this.$refs?.baseForm.validForm()
- 具体实现
father.vue
<Son ref="baseForm"/>
<script>
export default {
name: "father",
data() {
return {
baseForm:{}
};
},
async created() {
this.baseForm = await this.$refs?.baseForm.validForm()
}
};
</script>
son.vue
<el-form :model="baseForm" :rules="rules" ref="baseForm" label-width="100px" class="baseForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="baseForm.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
name: "son",
data() {
return {
baseForm:{
name:''
},
rules:{
name:[{ required: true, message: '请填写', trigger: 'blur' }]
}
};
},
method:{
// 保存前的校验
async validForm () {
return new Promise((resolve, reject) => {
return this.$refs['baseForm'].validate(valid => {
if (valid) {
resolve(this.baseForm)
}
})
})
},
}
};
</script>