Ranuras esbeltas

Cómo trabajar con ranuras en Svelte para definir componentes que se pueden componer juntos

Las ranuras son una forma práctica de permitirle definir componentes que se pueden componer juntos.

Y viceversa, dependiendo de su punto de vista, las ranuras son una forma práctica de configurar un componente que está importando.

Así es como funcionan.

En un componente puede definir una ranura usando el<slot />(o<slot></slot>) sintaxis.

Aquí está unButton.sveltecomponente que simplemente imprime un<button>Etiqueta HTML:

<button><slot /></button>

Para los desarrolladores de React, esto es básicamente lo mismo que<button>{props.children}</button>

Cualquier componente que lo importe puede definir el contenido que se colocará en la ranura agregándolo a las etiquetas de apertura y cierre del componente:

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

<Button>Insert this into the slot</Button>

Puede definir un valor predeterminado, que se utiliza si la ranura no está llena:

<button>
  <slot>
    Default text for the button
  </slot>
</button>

Puede tener más de una ranura en un componente y puede distinguir una de la otra utilizando ranuras con nombre. La única ranura sin nombre será la predeterminada:

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

Así es como lo usaría:

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

<Button> Insert this into the slot <p slot=“before”>Add this before</p> <p slot=“after”>Add this after</p> </Button>

Y esto daría lo siguiente al DOM:

<p slot="before">Add this before</p>
<button>
  Insert this into the slot
</button>
<p slot="after">Add this after</p>

Descarga mi gratisManual Svelte


Tutoriales más esbeltos: