CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Comment faire communiquer des composants Svelte avec des props

Comment faire communiquer des composants Svelte avec des props

Plusieurs composants dans une application Svelte
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Svelte 3 et SvelteKit 1.0
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
129,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
129,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Transmission des données entre composants

Objectifs

Les objectifs de cette vidéo sont de :

  • Montrer comment faire communiquer les composants Svelte à l'aide des props
  • Illustrer l'utilisation de l'instruction export let
  • Apprendre à passer et afficher des données dynamiquement entre composants

Résumé

Apprenez à faire communiquer des composants Svelte à l'aide des props. Cette leçon vous montrera comment utiliser la méthode export let pour transmettre des données entre un composant parent et un composant enfant.

Description

Dans cette vidéo, nous allons approfondir l'utilisation des props en Svelte pour permettre la communication entre les composants. Nous reprendrons le code de la vidéo précédente et le modifierons pour transmettre des données saisies dans un formulaire depuis un composant parent (App.svelte) vers un composant enfant (Fiche.svelte). L'objectif est de démontrer comment exporter et importer des variables entre les composants afin de les afficher dynamiquement.

Après avoir dupliqué le dossier du projet précédent, nous commencerons par nettoyer le fichier App.svelte pour ne conserver que le formulaire essentiel. Ensuite, nous créerons un nouveau fichier Fiche.svelte où nous utiliserons l'instruction export let pour déclarer les variables nécessaires. Nous ajouterons aussi un style CSS interne pour améliorer l'apparence.

Enfin, nous importerons et intègrerons le composant Fiche.svelte dans App.svelte, en passant les variables nécessaires via des props. Nous ajusterons le formulaire pour utiliser des placeholders et lier les entrées utilisateur aux variables déclarées.

Voir plus

Questions - réponses

Comment exporter une variable dans un composant Svelte ?
Dans Svelte, on peut exporter une variable en utilisant l'instruction export let suivie du nom de la variable.
Quelle est l'utilité des props dans Svelte ?
Les props permettent de passer des données d'un composant parent à un composant enfant, facilitant ainsi la communication entre les composants.
Comment importer un composant dans un autre fichier Svelte ?
Pour importer un composant, on utilise l'instruction import suivie du nom du composant et de son chemin, par exemple import Fiche from './Fiche.svelte'.

Programme détaillé