Comment 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 />

Plus de tutoriels sveltes:

• Premiers pas avec Svelte - un court tutoriel
• Comment travailler avec des accessoires dans Svelte
• Comment importer des composants dans Svelte
• Comment exporter des fonctions et des variables à partir d'un composant Svelte
• Modèles Svelte: logique conditionnelle
• Comment renvoyer un composant Svelte à la demande
• Machines à sous Svelte
• Comment ajouter des commentaires dans les modèles Svelte
• Fixations Svelte
• Gestion des mises à jour d'état dans Svelte
• Déclarations réactives dans Svelte
• Événements du cycle de vie Svelte
• Modèles Svelte: boucles
• Résoudre les promesses dans les modèles Svelte
• Travailler avec des événements dans Svelte
• Gestion des états inter-composants dans Svelte
• Comment accéder à un paramètre d'URL dans Sapper en dehors du module de script
• Comment appliquer dynamiquement CSS dans Svelte
• Comment rediriger vers une URL dans Sapper
• Comment simuler une boucle for dans les modèles Svelte