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

Passer des Fonctions Entre Composants dans Svelte

Retour à la formation
Chapitre 2 Leçon 8
Précédent
Suivant

Découvrez comment passer des fonctions entre composants dans Svelte, en utilisant l'attribut contexte = module.

Détails de la leçon

Description de la leçon

La vidéo démontre comment échanger des fonctions entre composants dans Svelte en exportant ces fonctions avec l'attribut context = module. Nous créons deux composants : compteur.svelte et app.svelte. Le composant compteur.svelte affiche un bouton qui incrémente un compteur, tandis que le composant app.svelte affiche plusieurs compteurs et un bouton pour afficher le total des compteurs. La fonction de calcul du total est définie dans compteur.svelte, mais exportée et utilisée dans app.svelte. En utilisant contexte = module, la fonction est stockée globalement, permettant une mémorisation unique.

Cette méthode permet de gérer l'état global de façon efficace, en évitant les duplications inutiles de fonctions pour chaque instance de composant.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à exporter des fonctions avec contexte = module, de comprendre comment gérer l'état global entre plusieurs instances de composants et de savoir utiliser ces concepts pour des applications Svelte plus complexes.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en JavaScript, des notions en Svelte ainsi qu'une expérience préalable avec les props en Svelte.

Métiers concernés

Les compétences abordées dans cette vidéo sont utiles pour des développeurs front-end, des ingénieurs en logiciel et des architectes d'applications travaillant sur des applications web modernes.

Alternatives et ressources

Des alternatives à Svelte pour la gestion de l'état global incluent des bibliothèques comme React avec Context API ou Vue.js avec Vuex.

Questions & Réponses

Utiliser l'attribut contexte = module permet de s'assurer que les fonctions exportées sont mises en mémoire une seule fois, évitant ainsi d'avoir une copie de la fonction pour chaque instance du composant.
Passer des fonctions permet de partager la logique entre plusieurs composants, facilitant ainsi la gestion de l'état global et la réutilisabilité du code.
Une variable globale peut être définie dans une balise script avec l'attribut contexte = module, garantissant une seule instance de la variable pour toutes les instances du composant.