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 tu punto de vista, las ranuras son una forma práctica de configurar un componente que estás importando.
Así es como funcionan.
En un componente puedes definir una ranura usando la sintaxis slot /
(o slot/slot
).
Aquí hay un Button.svelte
componente que simplemente imprime una button
etiqueta HTML:
buttonslot //button
Para los desarrolladores de React, esto es básicamente lo mismo quebutton{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:
scriptimport Button from './Button.svelte'/scriptButtonInsert this into the slot/Button
Puedes definir un valor predeterminado, que se utilizará si el espacio no está lleno:
button slot Default text for the button /slot/button
Puede haber más de una ranura en un componente y puede distinguir una de otra mediante ranuras con nombre. La única ranura sin nombre será la predeterminada: Blog sopper tappers
slot name="before" /button slot //buttonslot name="after" /
Así es como lo usarías:
scriptimport Button from './Button.svelte'/scriptButton Insert this into the slot p slot="before"Add this before/p p slot="after"Add this after/p/Button
Y esto le devolvería al DOM lo siguiente:
p slot="before"Add this before/pbutton Insert this into the slot/buttonp slot="after"Add this after/p
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Tragamonedas Svelte
Las ranuras son una forma práctica de permitirle definir componentes que se pueden componer juntos. Cómo trabajar con ranuras en Svelte para definir componen
programar
es
https://aprendeprogramando.es/static/images/programar-tragamonedas-svelte-2177-0.jpg
2024-11-03
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente