子组件
<el-form
:inline="true"
:rules="rules"
label-width="150px"
:model="assetShowData"
ref="ruleFormRef"
>
</el-form>
methods: {
validate(callback){
//这个ruleFormRef是子组件内部el-form 的ref="ruleFormRef"
this.$refs.ruleFormRef.validate((valid) => {
callback(valid);
});
}
}
在父组件的弹框中引入子组件,并为子组件添加ref
<add-asset-dialog
v-model:isShow="addAssetVisible"
:showFormObj="showFormObj"
top="40px"
width="60%"
style="margin: 0 auto"
ref="formRef"
></add-asset-dialog>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="confirmClick">确定</el-button>
<el-button @click="closeDialog()">取消</el-button>
</span>
</template>
//这个formRef是子组件标注的ref="formRef"
//这个validate 就是我们在自组件定义validate方法
confirmClick() {
(this.$refs.formRef as FormInstance).validate(async (valid) => {
if (valid) {//验证通过
const res = await addAsset(this.showFormObj);//请求后台接口
if (res.code === 0) {
ElMessage({
type: "success",
message: res.msg,
});
}
}
});
},