[Svelte Series 3] Managing Props and Event Forwarding

If components can't talk to each other, a screen falls apart. We'll rehearse props and event passing in the same order so the parent-child flow stays tight.

Key terms

1. createEventDispatcher: A Svelte helper that lets a child component emit its own events to inform the parent.
2. Event dispatcher: The tool returned by the helper; call dispatch('close') to send a named signal.
3. Event forwarding: Allowing intermediate components to pass events through unchanged so button chains keep working.

Core ideas

Props are the values a parent hands to a child component. With props, you can render the same card component multiple times with different data. A dispatcher lets the child notify the parent. createEventDispatcher transforms clicks or submits into custom events. Event forwarding ensures components in the middle don't block signals; they re-expose events with ...$$restProps so outer layers still hear them. You need all three pieces for deep component trees to keep their state flow intact.

Framework rules to remember

• Every value declared with export let is a read-only prop. If the child tries to mutate it directly, Svelte throws. Ask the parent to update via an event instead.
• Dispatcher event names are lowercase. The parent must listen with the exact same spelling, such as on:close.
• Slot content doesn't automatically receive on:click or other attributes. Use ...$$restProps when wrapping buttons so events continue bubbling.

Memorizing these “invisible rules” helps you diagnose where a prop or event gets stuck.

Code example

This modal component shows props, dispatchers, and slots working together. The code runs entirely in the browser; no server calls hide behind these events. When a click fires, dispatch runs inside the same file.

<!-- Modal.svelte -->
<script>
  export let open = false;
  export let title = "Settings";
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
</script>

{#if open}
  <section class="modal">
    <header>
      <h2>{title}</h2>
      <button on:click={() => dispatch('close')}>
        Close
      </button>
    </header>
    <slot />
  </section>
{/if}

The parent simply listens for on:close and flips its state to false. You can reuse the same modal for club votes or schedule edits. If you attach ...$$restProps to the button, the parent can pass through on:click and other attributes without hitting a dead end.

Why it matters

School apps repeat familiar UI: card lists, detail modals, confirmation buttons. Understanding props and events keeps the flow—card select → modal open → confirm click—moving in one direction. Dispatchers wire every user action, from toggles to form submits, back into parent state. With a solid flow now, you can extend the same pattern to stores and page data later in the series.

Practice

• Follow along: build Modal.svelte plus CardList.svelte, handling on:close and onSelect in the parent.
• Extend: after a card click, show the selected item in the header.
• Debug: if events never fire, double-check the on: prefix and inspect event.detail for data.
• Done when: clicking a list entry opens the modal and the Close button sets the parent state to false.

Wrap-up

Send data down with props and pull updates back up with events to keep components connected. Next we'll see how those values depend on {#if} and {#each}.