Component Event Forwarding in Svelte

December 9, 2021 - 1 minute read

In Svelte, you’ll sometimes need to forward events to an instance of a component.

Consider the following Button.svelte component, which accepts a click event:

<!-- Button.svelte -->

<button on:click />

The following Form.svelte component inherits the above Button.svelte component, and passes a click event to it:

<!-- Form.svelte -->

<script>
    import Button from '$lib/components/Button.svelte';

    let clicks = 0;
</script>

<Button on:click={() => clicks++} />

<p>Number of clicks: {clicks}</p>

This works for any event, and you don’t need to pass in an event to each instance.

Conclusion

That’s all! I hope this helped you, because this technique personally took me way longer to discover than it should have.

Link to this section Conclusion

Conclusion