Cómo exportar funciones y variables desde un componente Svelte

Aprenda a exportar funciones y variables desde un componente Svelte

Sabes que puedes importar un componente Svelte a otro usando la sintaxis

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

¿Qué sucede si desea exportar algo más que la exportación predeterminada?

Bueno, debes exportarlo desde un especialscriptetiqueta en el componente, con elcontext="module"atributo.

He aquí un ejemplo. Supongamos que tiene un componente Button enButton.svelte:

<button>A button</button>

y desea proporcionar a otros componentes la capacidad de cambiar el color del botón. Podrías usar accesorios, ese es un ejemplo. O puede proporcionar una función, llamadachangeColor.

Lo escribes y exportas en este especialscriptetiqueta:

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

Advertencia: no implementé la funcionalidad real, pero entiendes la idea.

Tenga en cuenta que puede tener otra etiqueta de secuencia de comandos "normal" en el componente.

Ahora otros componentes pueden importar Button, que es la exportación predeterminada, y elchangeColortambién funciona:

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

Descarga mi gratisManual Svelte

Cómo exportar funciones y variables desde un componente Svelte

Aprenda a exportar funciones y variables desde un componente Svelte

Tutoriales más esbeltos: