← Tous les chapitresChapitre 3 · ~25 min

Composants, props & events

Décomposer l’interface en blocs réutilisables avec $props et les slots.

Les props sont les données qu’un parent donne à son enfant. En Svelte 5, on les déclare avec $props().

  • On déstructure $props() dans <script> pour récupérer les valeurs.
  • Les valeurs non fournies peuvent avoir une valeur par défaut à la déstructuration.
  • Le compilateur interdit de modifier une prop directement.
src/lib/CourseCard.sveltesvelte
let { titre, description = '' } = $props()

<article class="card">
  <h3>{titre}</h3>
  {#if description}
    <p>{description}</p>
  {/if}
</article>