javascript / intermediate
Snippet
Dynamisches Property-Spreading für flexible Komponenten
Property-Spreading ermöglicht es Ihnen, alle Schlüssel eines Objekts als einzelne Props an eine Kind-Komponente zu übergeben. Dies ist nützlich für Konfigurationsobjekte oder über eine API abgerufene Daten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>import UserCard from './UserCard.svelte';const userData = {name: 'Markus',role: 'Developer',status: 'Active'};</script><UserCard {...userData} />
svelte
Erklärung
1
const userData = { ... }
Ein Objekt, dessen Schlüssel mit den erwarteten 'export let'-Namen in der Kind-Komponente übereinstimmen.
2
{...userData}
Der Spread-Operator (...) erweitert das Objekt in separate Prop-Zuweisungen für die Komponente.
3
UserCard
Die Komponente, die die gespreizten Props erhält, als ob sie einzeln als name={userData.name} übergeben worden wären.