Cómo utilizar las tragamonedas en Svelte

Svelte ofrece diferentes formas para que los componentes se comuniquen entre sí, incluidos accesorios, ranuras, etc. Necesitará integrar ranuras para crear componentes flexibles y reutilizables en sus aplicaciones Svelte.

Entendiendo las tragamonedas en Svelte

Ranuras en el marco esbelto trabajar de manera similar a tragamonedas en Vue. Proporcionan una forma de pasar contenido de un componente principal a uno secundario. Con las ranuras, puede definir marcadores de posición dentro de la plantilla de un componente donde puede inyectar contenido desde un componente principal.

Este contenido puede ser texto plano, marcado HTMLu otros componentes de Svelte. Trabajar con ranuras le permite crear componentes dinámicos y altamente personalizables que se adaptan a diferentes casos de uso.

Creando una ranura básica

Para crear una ranura en Svelte, use el ranura elemento dentro de la plantilla de un componente. El

ranura El elemento es un marcador de posición para el contenido que pasará desde el componente principal. De forma predeterminada, la ranura mostrará cualquier contenido que se le pase.

A continuación se muestra un ejemplo de cómo crear una ranura básica:

<main>
 This is the child component
<slot>slot>
main>

El bloque de código anterior representa un componente secundario que usa el elemento slot para obtener contenido de un componente principal.

Para pasar contenido de un componente principal a un componente secundario, primero importará el componente secundario al componente principal. Luego, en lugar de usar una etiqueta de cierre automático para representar el componente secundario, use una etiqueta de apertura y cierre. Finalmente, dentro de las etiquetas del componente, escriba el contenido que desea pasar del componente principal al secundario.

Por ejemplo:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<span>This is a message from the parent componentspan>
Component>
main>

Además de pasar contenido de los componentes primarios a secundarios, puede proporcionar contenido alternativo/predeterminado en las ranuras. Este contenido es lo que mostrará la ranura si el componente principal no pasa ningún contenido.

Así es como puedes pasar un contenido alternativo:

<main>
 This is the child component
<slot>Fallback Contentslot>
main>

Este bloque de código proporciona el texto "Contenido alternativo" como contenido alternativo para que se muestre la ranura si el componente principal no proporciona ningún contenido.

Pasar datos a través de la ranura con accesorios de ranura

Svelte le permite pasar datos a las ranuras utilizando accesorios de ranura. Utilice los accesorios de ranura en situaciones en las que desee pasar algunos datos del componente secundario al contenido que está insertando.

Por ejemplo:

<script>
 let message = 'Hello Parent Component!'
script>
<main>
 This is the child component
<slotmessage={message}>slot>
main>

El bloque de código de arriba representa un componente Svelte. Dentro de guion etiqueta, declaras la variable mensaje y asigne el texto "¡Hola componente principal!" lo. También pasa la variable de mensaje a la propiedad de la ranura. mensaje. Esto hace que los datos del mensaje estén disponibles para el componente principal cuando inyecta contenido en esta ranura.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

El dejar: mensaje La sintaxis permite que el componente principal acceda al mensaje accesorio de ranura que proporciona el componente secundario. El div etiquetas mensaje La variable son los datos de la mensaje accesorio de ranura.

Tenga en cuenta que no está limitado a un solo accesorio de ranura, puede pasar varios accesorios de ranura según sea necesario:

<script>
 let user = {
 firstName: 'John',
 lastName: 'Doe'
 };
script>
<main>
 This is the child component
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

En el componente principal:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: firstNamelet: lastName>
<div>
 The user's name is {firstName} {lastName}
div>
Component>
main>

Trabajar con ranuras con nombre

Puede utilizar ranuras con nombre cuando desee pasar varias ranuras en sus componentes. Las ranuras con nombre facilitan la gestión de varias ranuras, ya que puede darle a cada ranura un nombre único. Con ranuras con nombre, puede crear componentes complejos con diferentes diseños.

Para crear una ranura con nombre, pase un nombre apoyar a la ranura elemento:

<div>
 This is the child component

<p>Header: <slotname='header'>slot>p>
<p>Footer: <slotname='footer'>slot>p>
div>

En este ejemplo, hay dos ranuras con nombre, la ranura denominada encabezamiento y la ranura nombrada pie de página. Utilizando el ranura prop, puede pasar contenido a cada ranura desde el componente principal.

Por ejemplo:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<spanslot="header">This will be passed to the header slotspan>
<spanslot="footer">This will be passed to the footer slotspan>
Component>
main>

Este código demuestra cómo se utiliza el ranura prop para pasar contenido a espacios con nombre. En el primero durar etiqueta, pasas el ranura apoyo con el valor encabezamiento. Esto asegura que el texto dentro del durar La etiqueta se representará en el encabezamiento ranura. De manera similar, el texto dentro del durar etiqueta con el ranura valor del accesorio pie de página se rendirá en el pie de página ranura.

Comprender el reenvío de ranuras

El reenvío de ranuras es una característica de Svelte que le permite pasar contenido de un componente principal a través de un componente contenedor a un componente secundario. Esto puede resultar muy útil en los casos en los que desee pasar contenido de componentes no relacionados.

A continuación se muestra un ejemplo de cómo utilizar el reenvío de ranuras. Primero cree el componente secundario:

<main>
 This is the child component
<slotname="message">slot>
main>

A continuación, crea el componente contenedor:

<script>
 import Component from "./Component.svelte";
script>
<main>
<Component>
<divslot='message'>
<slotname="wrapperMessage">slot>
div>
Component>
main>

En este bloque de código, está pasando otra ranura con nombre al mensaje ranura del componente secundario.

Luego, en el componente principal, escriba este código:

<script>
 import Wrapper from "./Wrapper.svelte";
script>
<main>
 This is the parent component
<Wrapper>
<divslot="wrapperMessage">
 This is from the parent component
div>
Wrapper>
main>

En la estructura anterior, el contenido "Esto es del componente principal" pasa a través del componente contenedor y directamente al componente secundario gracias a envoltorioMensaje ranura dentro del componente de envoltura.

Haz tu vida más fácil con las tragamonedas Svelte

Las ranuras son una característica poderosa en Svelte que le permite crear componentes altamente personalizables y reutilizables. Ha aprendido a crear espacios básicos, espacios con nombre, utilizar accesorios de espacios, etc. Al comprender los diferentes tipos de tragamonedas y cómo usarlas, puede crear interfaces de usuario dinámicas y flexibles.