javascript / intermediate
Snippet
Dynamisches Rendering mit svelte:component
Das Element <svelte:component> ermöglicht es, eine Komponente dynamisch basierend auf einer Variablen zu rendern. Die Eigenschaft 'this' gibt an, welcher Komponenten-Konstruktor verwendet werden soll, was ideal für Tabs, Modale oder dynamische Dashboards ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<script>import RedCard from './RedCard.svelte';import BlueCard from './BlueCard.svelte';let current = RedCard;</script><button on:click={() => current = (current === RedCard ? BlueCard : RedCard)}>Toggle Component</button><svelte:component this={current} />
svelte
Erklärung
1
import RedCard from './RedCard.svelte';
Importiert die Komponentendefinition als Variable.
2
<svelte:component this={current} />
Rendert die Komponente, die aktuell in der Variablen 'current' gespeichert ist.