Cómo importar componentes en Svelte

Aprenda a importar componentes en Svelte

Svelte proporciona componentes de un solo archivo. Cada componente se declara en un.sveltearchivo, y allí puede escribir el marcado HTML, el CSS y el JavaScript necesarios.

Aquí hay un ejemplo simple de componente Svelte, que vive en un archivo llamadoButton.svelte:

<button>A button</button>

Túlataagregue CSS y JS a este componente, pero este marcado HTML simple ya es el marcado del componente, no hay necesidad de envolverlo en otra etiqueta especial ni nada.

Para exportar este marcado de este componente, no tiene que hacer nada. Ahora puede importarlo a cualquier otro componente Svelte usando elimport ComponentName from 'componentPath'sintaxis:

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

Y ahora puede usar el componente recién importado en el marcado, como una etiqueta HTML:

<Button />

Descarga mi gratisManual Svelte


Tutoriales más esbeltos:


Tech Wiki en línea!