javascript / intermediate
Snippet
Kommunikation vereinfachen mit Event-Forwarding
Komponenten können Ereignisse an ihre Eltern weiterleiten, ohne sie explizit zu verarbeiten. Durch das Hinzufügen von on:eventname ohne Wert reicht Svelte das Ereignis in der Hierarchie nach oben weiter, was Boilerplate in verschachtelten Strukturen reduziert.
snippet.js
javascript
1
2
3
4
5
6
7
<!-- Parent.svelte --><Child on:message /><!-- Child.svelte --><button on:click={() => dispatch('message', 'Hello')}>Click me</button>
svelte
Erklärung
1
<Child on:message />
Kurzschreibweise zum Weiterleiten des 'message'-Events vom Child an die Großeltern-Komponente.
2
dispatch('message', 'Hello')
Das ursprüngliche Ereignis, das von der Child-Komponente ausgelöst wurde.