How to Pass Event from Child to Parent in Svelte

In Svelte, you pass events from a child to a parent by using createEventDispatcher in the child component to send a custom event, and then listen for that event in the parent component with on:eventName. This lets the parent react when the child triggers the event.

Syntax

Use createEventDispatcher inside the child component to create a dispatcher function. Call this function with the event name and optional data to send the event. In the parent component, listen for the event using on:eventName on the child component tag.

This pattern allows communication from child to parent without direct references.

svelte

/* Child.svelte */
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function sendEvent() {
    dispatch('customEvent', { message: 'Hello from child' });
  }
</script>
<button on:click={sendEvent}>Send Event</button>


/* Parent.svelte */
<script>
  import Child from './Child.svelte';

  function handleCustomEvent(event) {
    alert(event.detail.message);
  }
</script>

<Child on:customEvent={handleCustomEvent} />

Example

This example shows a child component sending a message event to its parent. When the button in the child is clicked, the parent receives the event and shows an alert with the message.

svelte

/* Child.svelte */
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function notifyParent() {
    dispatch('notify', { text: 'Button clicked in child!' });
  }
</script>
<button on:click={notifyParent}>Click me</button>


/* Parent.svelte */
<script>
  import Child from './Child.svelte';

  function onNotify(event) {
    alert(event.detail.text);
  }
</script>

<h1>Parent Component</h1>
<Child on:notify={onNotify} />

Output

Parent Component
[Button labeled 'Click me']

When button clicked: alert popup with text 'Button clicked in child!'

Common Pitfalls

• Not importing or calling createEventDispatcher in the child component.
• Using the wrong event name in the parent listener (event names are case-sensitive).
• Expecting event data on event.target instead of event.detail.
• Trying to pass events without dispatching them properly from the child.

Always check that the child dispatches the event and the parent listens with the exact event name.

svelte

/* Wrong: child does not dispatch event */
<script>
  // Missing createEventDispatcher
  function send() {
    // No dispatch call
  }
</script>
<button on:click={send}>Send</button>

/* Correct: child dispatches event */
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function send() {
    dispatch('sent', { info: 'data' });
  }
</script>
<button on:click={send}>Send</button>

Quick Reference

Step	Description	Code Example
1	Import and create dispatcher in child	const dispatch = createEventDispatcher();
2	Dispatch event with name and data	dispatch('eventName', { key: value });
3	Listen for event in parent
4	Access event data in handler	function handler(event) { console.log(event.detail); }

Key Takeaways

Use createEventDispatcher in the child to send custom events to the parent.

Listen for the child's event in the parent with on:eventName syntax.

Event data is accessed via event.detail in the parent handler.

Event names are case-sensitive and must match exactly.

Always dispatch events properly to enable parent-child communication.