Svelte allows the creation of custom events for a component. When using it with TypeScript, it is also possible to add types that makes it easier to know which event can be listened to and its details.
The event dispatcher
import { createEventDispatcher } from 'svelte';
interface ComponentEvent {
toggle: null;
edit: { value: string; };
};
const dispatch = createEventDispatcher<ComponentEvent>();
const onToggle = () => dispatch('toggle');
const onEdit = (value: string) => dispatch('edit', { value });
The event listener
import Component from '$lib/components/Component.svelte';
import type { ComponentEvents } from 'svelte';
const handleEdit = (event: ComponentEvents<Component>['edit']) => {// ...};
Top comments (0)