3. Props
L'ADN d'un composant
Pour l'instant, notre composant n'est pas très intéressant. En effet, si on l'instancie plusieurs fois, il affichera toujours la même chose, car la donnée que nous avons utilisé est toujours la même.
On souhaite donc fournir des données différentes à nos instances de composants. Pour cela, nous avons besoin de props.
Les props sont la donnée "ADN" d'une instance. Elles viennent du parent, et ne peuvent pas être modifiées depuis l'intérieur du composant. Elles peuvent changer si le parent fournit de nouvelles valeurs.
Fournir des props
De la même manière que nous fournissons des attributs aux éléments HTML, nous pouvons fournir des props aux instances de composants.
<!-- ici on fournit href en props au composant standard a -->
<a href='https://www.github.com/bleucitron' />Mon profil Github</a>
<!-- ici on fournit name et age en props au composant Person -->
<Person name='Romain' age={38} />Vous pouvez bien sûr utiliser des variables pour fournir des props.
Si vous avez des données dans un objet, vous pouvez passer en props tous les champs de cet objet facilement grâce à la syntaxe de spread :
<script>
import Person from './Person.svelte';
const me = {
name: 'Romain',
age: 38
};
</script>
<!-- ici name et age sont fournies en props -->
<Profile {...me} />Utiliser les props : la rune $props
Pour pouvoir vous servir des props fournies à un composant, il faut les récupérer dans le composant
à l'aide de la rune $props.
Les runes sont le fondement de la réactivité de Svelte. Il en existe différents types. Nous en reparlerons plus tard.
<!-- Person.svelte -->
<script>
const { name, age } = $props();
</script>
<p>Nom : {name}</p>
<p>Âge : {age}</p>Vous pouvez si vous le souhaitez définir des valeurs par défaut à certaines props, les rendant ainsi optionnelles.
<!-- Person.svelte -->
<script>
const { name, age = 10 } = $props();
// age est optionnel, si non fourni, il vaudra 10 par défaut
</script>Si vous ne fournissez pas de valeur par défaut, la prop est à l'inverse considérée comme requise. Un warning sera alors affiché par le compilateur.
TypeScript
Si vous utilisez TypeScript, vous pouvez définir les types de vos props de cette manière :
<script lang="ts">
type PersonProps = {
name: string;
age?: number;
};
const { name, age = 10 }: PersonProps = $props();
</script>Le choix du nom
PersonPropsest arbitraire. Vous pouvez le nommer comme vous voulez.