CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

Utilisation des Custom Events en Svelte

Retour à la formation
Chapitre 4 Leçon 3
Précédent
Suivant

Découvrez comment un enfant peut transmettre des données à un parent en utilisant des Custom Events en Svelte.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer la méthode des Custom Events en Svelte pour permettre à un composant enfant de communiquer avec son parent. Après avoir récapitulé comment passer des données par des props du parent à l'enfant, nous introduirons un cas pratique impliquant deux composants: App.Svelte et Enfant.Svelte. Nous démontrerons comment, à l'aide de la fonction createEventDispatcher de Svelte, un composant enfant peut émettre des événements personnalisés

.

Nous mettrons en pratique cette théorie en créant des boutons dans le composant enfant qui, une fois cliqués, enverront des événements

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Comprendre l'utilisation de createEventDispatcher
  • Apprendre à émettre et intercepter des Custom Events
  • Mettre en place une communication entre un composant enfant et un composant parent

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en Svelte et en JavaScript.

Métiers concernés

Les développeurs front-end et ingénieurs en développement web trouveront cette technique particulièrement utile pour créer des applications Svelte modulaires et interactives.

Alternatives et ressources

En alternative aux Custom Events, vous pouvez envisager des solutions comme stores Svelte pour la gestion d'état partagée entre les composants.

Questions & Réponses

La fonction utilisée est createEventDispatcher depuis le module Svelte.
Le composant parent intercepte un Custom Event en ajoutant un gestionnaire d'événements avec la syntaxe on:eventName dans le composant enfant indiqué en HTML.
L'expression lambda permet d'exécuter des fonctions directement dans l'attribut de gestion d'événements, rendant le code plus concis.