Transmettre les propriétés avec $$props et $$restProps
Transmettez toutes les propriétés, ou celles restantes, à un élément ou composant imbriqué.
Transmettre les propriétés avec $$props et $$restProps est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Pourquoi transmettre les propriétés
Les composants enveloppes doivent souvent transmettre toutes les propriétés reçues à un élément interne. La transmission évite d’énumérer chaque attribut.
L’objet $$props
À l’intérieur d’un composant, $$props est un objet qui contient toutes les propriétés transmises au composant.
<script>
// $$props is auto-injected
</script>
<input {...$$props} />Inclure les propriétés inconnues
Même les propriétés que le composant n’a pas déclarées avec export let sont présentes dans $$props.
L’objet $$restProps
$$restProps exclut les propriétés que vous avez explicitement déclarées avec export let. Il est utile pour ne transmettre que les propriétés supplémentaires.
<script>
export let label;
</script>
<input {...$$restProps} />Modèle courant
Déclarez les propriétés qui vous intéressent et transmettez les autres à l’élément enveloppé.
<script>
export let label;
export let helpText;
</script>
<label>{label}</label>
<input {...$$restProps} />Piège : l’ordre est important
Propagez d’abord les propriétés, puis remplacez-les par des attributs précis si nécessaire.
<input {...$$restProps} type="email" />Transmission de l’attribut de classe
Transmettez l’attribut class via $$restProps pour bénéficier d’une plus grande souplesse de personnalisation.
Transmission du style
L’attribut style et tous les attributs data-* sont également transmis naturellement.
Gestionnaires d’événements
Les écouteurs d’événements transmis par le parent sont présents dans $$props sous forme de fonctions. La propagation les transmet également.
Restrictions liées à la réactivité
$$props et $$restProps sont légèrement moins efficaces que les propriétés déclarées, car Svelte ne peut pas suivre leurs dépendances de manière statique.
Particularité de TypeScript
Les deux objets sont faiblement typés par défaut. Effectuez une conversion de type ou complétez-les en TS pour une transmission sûre du point de vue des types.
Vérification rapide
Qu’est-ce que $$restProps ?
Récapitulatif
Transmettez les propriétés avec $$props (toutes) ou $$restProps (uniquement les supplémentaires) en utilisant la propagation sur l’élément interne.
Questions Fréquemment Posées
La leçon « Transmettre les propriétés avec $$props et $$restProps » est-elle gratuite ?
Oui — le texte complet de « Transmettre les propriétés avec $$props et $$restProps » 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 les propriétés avec $$props et $$restProps » ?
Transmettez toutes les propriétés, ou celles restantes, à un élément ou composant imbriqué. 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 4 sur 4.
Combien de temps prend la leçon « Transmettre les propriétés avec $$props et $$restProps » ?
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