Transmettre des propriétés depuis le parent
Fournissez des valeurs aux propriétés des composants enfants dans le modèle du parent.
Transmettre des propriétés depuis le parent est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Importer l’enfant
Utilisez un import ES standard au début du composant parent pour y intégrer le composant enfant.
<script>
import Greeting from "./Greeting.svelte";
</script>Utiliser la balise
Rendez le composant enfant en écrivant une balise portant son nom avec une majuscule initiale.
<Greeting />Transmettre des valeurs statiques
Transmettez une chaîne littérale avec des attributs entre guillemets.
<Greeting name="Ada" />Transmettre des valeurs dynamiques
Transmettez une expression JS en entourant la valeur d’accolades.
<Greeting name={userName} />Raccourci avec le même nom
Si la propriété et la variable portent le même nom, utilisez le raccourci {name}.
<Greeting {name} />Plusieurs propriétés
Combinez des propriétés statiques, dynamiques et abrégées dans n’importe quel ordre.
<Card title="Tasks" {items} count={items.length} />Propagation des propriétés
Propagez un objet de propriétés avec la syntaxe {...obj}.
<Card {...cardProps} />Propriétés conditionnelles
Combinez des opérateurs ternaires pour fournir des valeurs conditionnelles.
<Button label={isLoading ? "Saving..." : "Save"} />Raccourci booléen
Transmettez un attribut booléen sans valeur pour lui attribuer la valeur true.
<Toggle disabled />Fonctions comme propriétés
Vous pouvez transmettre des références de fonctions comme propriétés pour créer des fonctions de rappel.
<Modal onClose={() => (open = false)} />Propriétés sous forme d’objet
Transmettez des objets entiers lorsque plusieurs valeurs liées doivent être transmises ensemble.
<UserCard user={currentUser} />Vérification rapide
Comment transmettre une variable comme propriété ?
Récapitulatif
Importez le composant, utilisez la balise et transmettez les propriétés avec des littéraux, des expressions, la syntaxe abrégée ou la propagation.
Questions Fréquemment Posées
La leçon « Transmettre des propriétés depuis le parent » est-elle gratuite ?
Oui — le texte complet de « Transmettre des propriétés depuis le parent » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Transmettre des propriétés depuis le parent » ?
Fournissez des valeurs aux propriétés des composants enfants dans le modèle du parent. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Transmettre des propriétés depuis le parent » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Déclarer des propriétés avec export let
- Transmettre des propriétés depuis le parent
- Valeurs par défaut des propriétés
- Transmettre les propriétés avec $$props et $$restProps