Tragamonedas Svelte

 

 

 

Tragamonedas svelte 1

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.sveltecomponente que simplemente imprime una buttonetiqueta 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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Tragamonedas svelte 1
Tragamonedas svelte 1

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

 

 

Update cookies preferences