Configurer les Composants pour la Transmission d'Événements
Objectifs
À l'issue de cette vidéo, vous saurez comment :
- Transmettre des événements DOM entre composants Svelte.
- Implémenter et gérer des custom events dans un projet Svelte.
- Mettre à jour et afficher des variables d'état en réponse aux événements DOM.
Résumé
Découvrez comment transmettre des événements DOM entre composants Svelte à travers un exemple pratique.
Description
Dans cette leçon, nous allons explorer comment un composant Svelte peut transmettre des événements DOM à son parent en utilisant des custom events. Nous allons créer une application Svelte avec deux composants : App et Enfant. Le composant Enfant contiendra un simple bouton et transmettra plusieurs événements personnalisés comme OnClick, OnMouseEnter et OnMouseOut.
Nous intégrerons ces événements dans le composant App en définissant trois fonctions spécifiques pour gérer chacun de ces événements. La fonction EVClick mettra à jour une variable d'état indiquant que le bouton a été cliqué. EVMouseEnter changera l'état pour signaler que la souris est au-dessus du bouton, tandis que EVMouseOut indiquera que la souris n'est plus au-dessus du bouton. Nous afficherons ensuite l'état actuel sous le composant Enfant à l'aide d'une interpolation. En suivant ce tutoriel, vous apprendrez à transmettre et gérer des événements DOM d'un composant à un autre dans une application Svelte.
Questions - réponses
Programme détaillé
Module 1 - Introduction et premiers pas
Module 2 - La syntaxe de base de Svelte
Module 3 - Conditions, boucles et gestion événementielle
Module 4 - Les composants
Module 5 - Slots et Lifecycle hooks
Module 6 - Gestion des formulaires
Module 7 - Les stores de Svelte
Module 8 - Animations et transitions
Module 9 - Une application SPA avec Svelte
Module 10 - SvelteKit
