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.svelte
componente 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:
- Empezando con Svelte - un breve tutorial
- Cómo trabajar con accesorios en Svelte
- Cómo importar componentes en Svelte
- Cómo exportar funciones y variables desde un componente Svelte
- Plantillas esbeltas: lógica condicional
- Cómo volver a renderizar un componente Svelte a pedido
- Ranuras esbeltas
- Cómo agregar comentarios en las plantillas de Svelte
- Ataduras esbeltas
- Manejo de actualizaciones de estado en Svelte
- Declaraciones reactivas en Svelte
- Eventos esbeltos del ciclo de vida
- Plantillas esbeltas: bucles
- Resolver promesas en plantillas Svelte
- Trabajar con eventos en Svelte
- Gestión de estado de componentes cruzados en Svelte
- Cómo acceder a un parámetro de URL en Sapper fuera del módulo de script
- Cómo aplicar CSS dinámicamente en Svelte
- Cómo redirigir a una URL en Sapper
- Cómo simular un bucle for en plantillas Svelte