Comment importer des composants dans Svelte

Apprenez à importer des composants dans Svelte

Svelte fournit des composants de fichier unique. Chaque composant est déclaré dans un.sveltefichier, et là-dedans, vous pouvez écrire le balisage HTML, le CSS et le JavaScript nécessaires.

Voici un exemple simple de composant Svelte, vivant dans un fichier appeléButton.svelte:

<button>A button</button>

Tupeutajoutez CSS et JS à ce composant, mais ce balisage HTML simple est déjà le balisage du composant, il n'est pas nécessaire de l'envelopper dans une autre balise spéciale ou quoi que ce soit.

Pour exporter ce balisage à partir de ce composant, vous n'avez rien à faire. Vous pouvez maintenant l'importer dans n'importe quel autre composant Svelte en utilisant leimport ComponentName from 'componentPath'syntaxe:

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

Et maintenant, vous pouvez utiliser le composant nouvellement importé dans le balisage, comme une balise HTML:

<Button />

Téléchargez mon gratuitManuel de Svelte


Plus de tutoriels sveltes: