Como usar slots no Svelte

Svelte oferece diferentes maneiras de os componentes se comunicarem entre si, incluindo adereços, slots, etc. Você precisará integrar slots para criar componentes flexíveis e reutilizáveis ​​em seus aplicativos Svelte.

Compreendendo os slots no Svelte

Slots em a estrutura Svelte trabalhar de forma semelhante a slots no Vue. Eles fornecem uma maneira de passar conteúdo de um componente pai para um componente filho. Com slots, você pode definir espaços reservados no modelo de um componente onde pode injetar conteúdo de um componente pai.

Este conteúdo pode ser texto simples, Marcação HTMLou outros componentes do Svelte. Trabalhar com slots permite criar componentes altamente personalizáveis ​​e dinâmicos que se adaptam a diferentes casos de uso.

Criando um Slot Básico

Para criar um slot no Svelte, use o slot elemento dentro do modelo de um componente. O slot element é um espaço reservado para o conteúdo que você passará do componente pai. Por padrão, o slot renderizará qualquer conteúdo passado para ele.

Aqui está um exemplo de como criar um slot básico:

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

O bloco de código acima representa um componente filho que usa o elemento slot para obter conteúdo de um componente pai.

Para passar o conteúdo de um componente pai para um componente filho, primeiro você importará o componente filho para o componente pai. Então, em vez de usar uma tag de fechamento automático para renderizar o componente filho, use uma tag de abertura e fechamento. Finalmente, dentro das tags do componente, escreva o conteúdo que deseja passar do componente pai para filho.

Por exemplo:

<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>

Além de passar conteúdo dos componentes pai para filho, você pode fornecer conteúdo substituto/padrão nos slots. Este conteúdo é o que o slot exibirá se o componente pai não passar nenhum conteúdo.

Veja como você pode transmitir um conteúdo substituto:

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

Este bloco de código fornece o texto "Conteúdo substituto" como um conteúdo substituto para o slot exibir se o componente pai não fornecer nenhum conteúdo.

Passando dados entre slots com acessórios de slot

Svelte permite que você passe dados para slots usando slots props. Você usa os adereços slot em situações em que deseja passar alguns dados do componente filho para o conteúdo que está inserindo.

Por exemplo:

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

O bloco de código acima representa um componente Svelte. Dentro do roteiro tag, você declara a variável mensagem e atribua o texto "Hello Parent Component!" para isso. Você também passa a variável message para a propriedade slot mensagem. Isso disponibiliza os dados da mensagem para o componente pai quando ele injeta conteúdo nesse slot.

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

O deixe: mensagem sintaxe permite que o componente pai acesse o mensagem slot prop que o componente filho fornece. O divisão Tag mensagem variável são os dados do mensagem suporte de slot.

Observe que você não está limitado a um único slot prop, você pode passar vários slots conforme necessário:

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

No componente pai:

<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>

Trabalhando com Slots Nomeados

Você pode usar slots nomeados quando quiser passar vários slots em seus componentes. Os slots nomeados facilitam o gerenciamento de vários slots, pois você pode atribuir um nome exclusivo a cada slot. Com slots nomeados, você pode construir componentes complexos com layouts variados.

Para criar um slot nomeado, passe um nome suporte para o slot elemento:

<div>
 This is the child component

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

Neste exemplo, existem dois slots nomeados, o slot denominado cabeçalho e o slot chamado rodapé. Usando o slot prop, você pode passar conteúdo para cada slot do componente pai.

Por exemplo:

<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 demonstra como você usa o slot prop para passar conteúdo para slots nomeados. Em primeiro período etiqueta, você passa o slot prop com o valor cabeçalho. Isso garante que o texto dentro do período tag será renderizada no cabeçalho slot. Da mesma forma, o texto dentro do período marque com o slot valor do adereço rodapé renderizará no rodapé slot.

Compreendendo o encaminhamento de slot

O encaminhamento de slot é um recurso do Svelte que permite passar o conteúdo de um componente pai através de um componente wrapper para um componente filho. Isto pode ser muito útil nos casos em que você deseja passar conteúdo de componentes não relacionados.

Aqui está um exemplo de como usar o encaminhamento de slot, primeiro crie o componente filho:

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

A seguir, você cria o componente wrapper:

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

Neste bloco de código, você está passando outro slot nomeado para o mensagem slot do componente filho.

Então, no componente pai, escreva 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>

Na estrutura acima, o conteúdo "Isto é do componente pai" passa pelo componente wrapper e diretamente para o componente filho graças ao wrapperMessage slot dentro do componente wrapper.

Facilite sua vida com slots Svelte

Slots são um recurso poderoso do Svelte que permite criar componentes altamente personalizáveis ​​​​e reutilizáveis. Você aprendeu como criar slots básicos, slots nomeados, usar acessórios de slot, etc. Ao compreender os diferentes tipos de slots e como usá-los, você pode construir interfaces de usuário dinâmicas e flexíveis.