Components can dispatch events to parent components with Svelte's built-in createEventDispatcher
helper.
Provide an event name and data for your component to dispatch.
Create a handler for your custom event.
Register your handler as a listener for your custom event.
Todo.svelte <script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let task;
export let completed = false;
function handleInput(event) {
dispatch('checked', {
checked: event.target.checked,
});
}
</script>
<p>
<input
type="checkbox"
checked={completed}
on:input={handleInput}
>
{task}
</p>
TodoList.svelte <script>
import Todo from './Todo.svelte';
function handleChecked(event) {
if (event.detail.checked) {
alert('Good job!');
}
}
</script>
<Todo
task="Mow lawn"
on:checked={handleChecked}
/>