Events & Callback-Props

Kommunikation nach oben

Props fließen nach unten — aber wie meldet ein Kind ein Ereignis nach oben? In Svelte 5 ganz ohne Sondermechanik: Die Eltern-Komponente übergibt eine Funktion als Prop, das Kind ruft sie zum passenden Zeitpunkt auf. Solche Props nennt man Callback-Props; per Konvention beginnen sie mit on.

<script lang="ts">
  interface Props {
    onsave: (text: string) => void;
  }

  let { onsave }: Props = $props();
  let entwurf = $state('');
</script>

<input bind:value={entwurf} placeholder="Notiz…" />
<button onclick={() => onsave(entwurf)}>Speichern</button>

Das Kind kennt die konkrete Logik nicht — es ruft nur onsave(entwurf) auf und übergibt seine Daten. Was damit passiert, entscheidet die Eltern-Komponente.

Eltern reichen die Funktion herein

Auf der Elternseite ist der Callback eine normale Prop — entweder eine benannte Funktion oder eine Inline-Arrow-Funktion. Die Daten, die das Kind übergibt, kommen als Argumente an.

<script lang="ts">
  import NotizFeld from './NotizFeld.svelte';

  let notizen = $state<string[]>([]);

  function speichern(text: string) {
    notizen.push(text);
  }
</script>

<!-- Callback als ganz normale Prop übergeben -->
<NotizFeld onsave={speichern} />

<!-- oder inline: -->
<NotizFeld onsave={(t) => notizen.push(t)} />

Eine Komponente kann beliebig viele Callback-Props haben, auch optionale:

interface Props {
  onsave: (text: string) => void;
  oncancel?: () => void;   // optional
  ondelete?: (id: number) => void;
}

let { onsave, oncancel, ondelete }: Props = $props();

Kein createEventDispatcher mehr

Wer Svelte 4 kennt: Das alte Event-System mit createEventDispatcher und on:save existiert in den Runes nicht mehr. Callback-Props ersetzen es vollständig — sie sind typsicher, ohne Zusatz-Import und ganz normale Werte.

<script>
  // ❌ Svelte 4 — gibt es in Runes NICHT mehr:
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function speichern() {
    dispatch('save', entwurf); // altes Event-System
  }
</script>

<!-- Eltern: <Kind on:save={handler} /> -->

Live: Callbacks steuern den State

Hier das Muster innerhalb einer Datei: Die Buttons rufen jeweils dieselbe Funktion aendern(delta, grund) mit unterschiedlichen Argumenten auf — genau so würde ein Kind eine übergebene Callback-Prop aufrufen. Der zentrale Zähler weiß nichts von den einzelnen Buttons.

Zusammenfassung