Say I have an SFC component with a save
emit:
// ChildComponent.vue
const emit = defineEmits<{
save: [data: { new: Row[]; removed: Row[] }];
}>();
If I want to use the new
& removed
in a parent component I would do this:
// ParentComponent.vue
<ChildComponent
@save="($event) => {
performAPIRemove($event.removed); // TypeScript correctly infers `$event` type
}"
/>
However, I want to define the event callback as a named function. How do I get the type of the child component's emit?
// ParentComponent.vue
// Something along the lines of...
function saveCallback(event: typeof ChildComponent.emits.save) {
performAPIRemove(event.removed)
}
I,
You can create an interface in a ,ts file ex :
Then, in your child component, you can use this type :
And you can type your callback parameter like this :