Comment exporter des fonctions et des variables à partir d'un composant Svelte

Apprenez à exporter des fonctions et des variables à partir d'un composant Svelte

Vous savez que vous pouvez importer un composant Svelte dans un autre en utilisant la syntaxe

<script>
import Button from './Button.svelte';
</script>

Que faire si vous souhaitez exporter quelque chose de plus que l'exportation par défaut?

Eh bien, vous devez l'exporter à partir d'un spécialscriptbalise dans le composant, avec lecontext="module"attribut.

Voici un exemple. Supposons que vous ayez un composant Button dansButton.svelte:

<button>A button</button>

et vous souhaitez fournir à d'autres composants la possibilité de changer la couleur du bouton. Vous pouvez utiliser des accessoires, c'est un exemple. Ou vous pouvez fournir une fonction, appeléechangeColor.

Vous l'écrivez et l'exportez dans ce spécialscriptétiqueter:

<script context="module">
export function changeColor() {
  //...add logic..
}
</script>
<button>A button</button>

Attention: je n'ai pas implémenté la fonctionnalité réelle, mais vous voyez l'idée.

Notez que vous pouvez avoir une autre balise de script «normale», dans le composant.

Désormais, d'autres composants peuvent importer Button, qui est l'exportation par défaut, et lechangeColorfonction aussi:

<script>
import Button, { changeColor } from './Button.svelte'
</script>

Téléchargez mon gratuitManuel de Svelte

Comment exporter des fonctions et des variables à partir d'un composant Svelte

Apprenez à exporter des fonctions et des variables à partir d'un composant Svelte

Plus de tutoriels sveltes: