export let
En mode runes, les props de composant sont déclarées avec la rune
$props, ce qui permet aux composants parent de fournir des données.
En mode legacy, les props sont déclarées avec le mot-clé export, et peuvent avoir une valeur par
défaut :
<script>
export let foo;
export let bar = 'valeur par défaut';
// les valeurs qui sont passées comme props
// sont immédiatement disponibles
console.log({ foo });
</script>La valeur par défaut est utilisée si celle-ci devait être undefined lors de la création du
composant.
À la différence du mode runes, si le composant parent change la valeur d’une prop d’une valeur définie à
undefined, la valeur par défaut ne sera pas utilisée.
Les props sans valeur par défaut sont considérées obligatoires, et Svelte affichera un warning en
mode développement si aucune valeur n’est fournie, ce que vous pouvez éviter en fournissant
undefined en valeur par défaut :
export let let foo: undefinedfoo = var undefinedundefined;Exports de composant
Une déclaration exportée utilisant const, class, ou function n’est pas considérée comme une
prop — elle devient à la place une partie de l’API du composant :
<script>
export function greet(name) {
alert(`coucou ${name} !`);
}
</script><script lang="ts">
export function greet(name) {
alert(`coucou ${name} !`);
}
</script><script>
import Greeter from './Greeter.svelte';
let greeter;
</script>
<Greeter bind:this={greeter} />
<button on:click={() => greeter.greet('tout le monde')}>
accueillir
</button><script lang="ts">
import Greeter from './Greeter.svelte';
let greeter;
</script>
<Greeter bind:this={greeter} />
<button on:click={() => greeter.greet('tout le monde')}>
accueillir
</button>Renommer des props
Le mot-clé export peut apparaître indépendamment de la déclaration. Ceci permet de renommer des
props, dans le cas par exemple d’un mot réservé :
<script>
/** @type {string} */
let className;
// crée une propriété `class`,
// même s'il s'agit d'un mot réservé
export { className as class };
</script><script lang="ts">
let className: string;
// crée une propriété `class`,
// même s'il s'agit d'un mot réservé
export { className as class };
</script>Modifier cette page sur Github