父组件
<template>
<el-scrollbar>
<AddSelfFunc ref="addFuncformRef"></AddSelfFunc>
</el-scrollbar>
<el-button type="primary" @click="addFunctionSubmit">确定</el-button>
</template>
<script lang="ts" setup>
const addFuncformRef=ref<FormInstance>()
async function addFunctionSubmit(){
await (addFuncformRef.value as FormInstance).validate((value) => {
if (value) {
console.log('submit!')
}else{
console.log('验证不通过')
}
});
}
</script>
子组件
<template>
<el-form ref="addFunctionFrom" :rules="addFunctionRules">
//.....
</el-form>
</template>
<script lang="ts">
export default defineComponent({
name: 'AddSelfFunc',
setup(props, context) {
const addFunctionFrom = ref<FormInstance>();
function validate(callback){
addFunctionFrom.value.validate((valid) => {
callback(valid);
});
}
return {addFunctionFrom,validate}
}
})
</script>