Guías Técnicas

Cómo Exportar un Componente en Svelte

En Svelte, puedes exportar un componente para reutilizarlo en otros archivos del proyecto. Esto es útil para organizar tu código y dividir la lógica o interfaz en componentes reutilizables.

¿Qué es Exportar un Componente en Svelte?

Exportar un componente significa hacerlo disponible para ser importado y usado en otros archivos de tu proyecto. Esto permite organizar mejor tu código y reutilizarlo fácilmente.

En Svelte, puedes exportar componentes de manera predeterminada (default) o como exportaciones nombradas si necesitas más control.

Exportar un Componente Básico

Un componente básico que muestra un botón con una etiqueta que se pasa como prop. Este es el caso más común de exportación.

  Cómo Exportar un Componente

  1. Crea un archivo Svelte con el componente que quieres exportar (por ejemplo, Button.svelte).
  2. Usa la palabra clave export default si el componente será el principal del archivo.

Componente Button.svelte:

js 
<script>
export let label = 'Click me';
</script>

<button>{label}</button>

Usando el componente Button.svelte en otro archivo (App.svelte):

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

<Button label="Presiona aquí" />
  Recuerda

Creas el componente con propiedades configurables, usas export let para hacerlas accesibles desde el componente padre, y luego lo importas en otros archivos para reutilizarlo, pasando valores a sus propiedades según sea necesario.

Exportar un Componente con Función Asociada

Exportamos un componente y una función relacionada con su funcionalidad para darle más flexibilidad al desarrollador.

AlertButton.svelte:

js 
<script>
export let label = 'Alert';
export function showAlert() {
  alert('¡Alerta activada!');
}
</script>

<button on:click={showAlert}>{label}</button>

Uso en otro archivo (App.svelte):

js 
<script>
import AlertButton, { showAlert } from './AlertButton.svelte';
</script>

<AlertButton label="Alerta" />
<button on:click={showAlert}>Mostrar Alerta desde otro botón</button>
  Nota

Dicho ejemplo muestra cómo exportar un componente (AlertButton.svelte) junto con una función (showAlert) que puede ser utilizada dentro del mismo componente o desde otros archivos. Al importar ambos en App.svelte, se permite la reutilización tanto del botón como de la funcionalidad de alerta en diferentes partes de la aplicación.

Exportar Múltiples Componentes desde un Archivo

Para este ejemplo se muestra cómo exportar dos componentes (Header y Footer) para ser reutilizados en otros archivos, lo que mejora la organización y reutilización del código.

Components.svelte:

js 
<script>
export let Header = () => <h1>Este es un encabezado</h1>;
export let Footer = () => <footer>Pie de página</footer>;
</script>

Componente App.svelte Aquí importamos los componentes y los usamos en el template.

js 
<script>
import { Header, Footer } from './Components.svelte';
</script>

<Header />
<p>Bienvenido a la aplicación</p>
<Footer />
  Explicación

  • Exportación: En Components.svelte, cada componente se exporta como una variable.
  • Importación: En App.svelte, los importamos usando { Header, Footer }.
  • Uso: Se pueden utilizar como cualquier otro componente dentro del template.