O Svelte oferece diversas formas para os componentes comunicarem-se entre si, incluindo propriedades (props), slots e outras abordagens. Para criar componentes flexíveis e reutilizáveis em suas aplicações Svelte, a utilização de slots é fundamental.
Entendendo os Slots no Svelte
No framework Svelte, os slots funcionam de maneira similar aos slots do Vue. Eles fornecem uma forma de transmitir conteúdo de um componente pai para um componente filho. Com slots, é possível definir espaços reservados no template de um componente, onde se pode injetar conteúdo proveniente de um componente pai.
Esse conteúdo pode ser texto simples, marcação HTML ou até mesmo outros componentes Svelte. Ao trabalhar com slots, você tem a capacidade de criar componentes altamente customizáveis e dinâmicos, adaptáveis a diversos casos de uso.
Criando um Slot Básico
Para criar um slot no Svelte, utilize o elemento `slot` dentro do template de um componente. Esse elemento serve como um espaço reservado para o conteúdo que será transferido do componente pai. Por padrão, o slot renderizará qualquer conteúdo que lhe for passado.
Confira um exemplo de como criar um slot básico:
<main>
Este é o componente filho
<slot></slot>
</main>
O bloco de código acima demonstra um componente filho que emprega o elemento `slot` para receber conteúdo de um componente pai.
Para passar conteúdo de um componente pai para um componente filho, inicialmente, você deve importar o componente filho para o componente pai. Em seguida, em vez de utilizar uma tag de fechamento automático para renderizar o componente filho, empregue uma tag de abertura e fechamento. Por fim, dentro das tags do componente, insira o conteúdo que você deseja transferir do componente pai para o filho.
Por exemplo:
<script>
import Component from "./Component.svelte";
</script><main>
Este é o componente pai
<Component>
<span>Esta é uma mensagem do componente pai</span>
</Component>
</main>
Além de passar conteúdo dos componentes pai para filho, é possível fornecer um conteúdo substituto ou padrão nos slots. Este conteúdo será exibido pelo slot caso o componente pai não envie nenhum conteúdo.
Observe como é possível transmitir um conteúdo substituto:
<main>
Este é o componente filho
<slot>Conteúdo de Fallback</slot>
</main>
Este bloco de código disponibiliza o texto “Conteúdo de Fallback” como conteúdo substituto para o slot exibir quando o componente pai não fornecer nenhum conteúdo.
Transmitindo Dados Através de Slots com Props de Slot
O Svelte permite a transmissão de dados para slots utilizando props de slot. Esses props são usados quando você deseja transferir dados do componente filho para o conteúdo que está sendo injetado.
Por exemplo:
<script>
let message="Olá Componente Pai!"
</script><main>
Este é o componente filho
<slot message={message}></slot>
</main>
O bloco de código acima representa um componente Svelte. Dentro da tag script, a variável `message` é declarada e recebe o texto “Olá Componente Pai!”. Esta variável é então passada para o prop `message` do slot. Isso disponibiliza os dados da mensagem para o componente pai quando este injeta conteúdo nesse slot.
<script>
import Component from "./Component.svelte";
</script><main>
Este é o componente pai
<Component let:message>
<div>
O componente filho diz: {message}
</div>
</Component>
</main>
A sintaxe `let:message` permite que o componente pai acesse o prop `message` fornecido pelo componente filho. A variável `message` dentro da tag div representa os dados provenientes do prop de slot `message`.
É importante notar que você não está limitado a um único prop de slot; você pode passar múltiplos props conforme a necessidade:
<script>
let user = {
firstName: 'João',
lastName: 'Silva'
};
</script><main>
Este é o componente filho
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
No componente pai:
<script>
import Component from "./Component.svelte";
</script><main>
Este é o componente pai
<Component let:firstName let:lastName>
<div>
O nome do usuário é: {firstName} {lastName}
</div>
</Component>
</main>
Utilizando Slots Nomeados
Os slots nomeados são empregados quando se deseja passar múltiplos slots em seus componentes. Eles facilitam o gerenciamento de diversos slots, pois é possível atribuir um nome único a cada um. Com slots nomeados, a construção de componentes complexos com layouts variados torna-se mais simples.
Para criar um slot nomeado, passe um atributo `name` para o elemento `slot`:
<div>
Este é o componente filho
<p>Cabeçalho: <slot name="header"></slot></p>
<p>Rodapé: <slot name="footer"></slot></p>
</div>
Neste exemplo, existem dois slots nomeados: o slot denominado “header” e o slot denominado “footer”. Através do atributo `slot`, você pode passar conteúdo para cada um desses slots a partir do componente pai.
Por exemplo:
<script>
import Component from "./Component.svelte";
</script><main>
Este é o componente pai
<Component>
<span slot="header">Isto será passado para o slot do cabeçalho</span>
<span slot="footer">Isto será passado para o slot do rodapé</span>
</Component>
</main>
Este código demonstra como utilizar o atributo `slot` para direcionar conteúdo para os slots nomeados. Na primeira tag `span`, o atributo `slot` é definido com o valor “header”, garantindo que o texto dentro dessa tag seja renderizado no slot do cabeçalho. Da mesma forma, o texto dentro da tag `span` com o atributo `slot` definido como “footer” será renderizado no slot do rodapé.
Entendendo o Encaminhamento de Slots
O encaminhamento de slots é um recurso do Svelte que permite passar conteúdo de um componente pai através de um componente wrapper para um componente filho. Isso se revela muito útil em situações onde se deseja transferir conteúdo entre componentes não diretamente relacionados.
Para ilustrar o uso do encaminhamento de slots, comece criando o componente filho:
<main>
Este é o componente filho
<slot name="message"></slot>
</main>
Em seguida, crie o componente wrapper:
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
Neste bloco de código, um outro slot nomeado está sendo passado para o slot de mensagem do componente filho.
Agora, no componente pai, adicione o seguinte código:
<script>
import Wrapper from "./Wrapper.svelte";
</script><main>
Este é o componente pai
<Wrapper>
<div slot="wrapperMessage">
Isto é do componente pai
</div>
</Wrapper>
</main>
Na estrutura acima, o conteúdo “Isto é do componente pai” é encaminhado através do componente wrapper e diretamente para o componente filho, graças ao slot `wrapperMessage` dentro do componente wrapper.
Simplifique sua Vida com os Slots do Svelte
Os slots são um recurso poderoso do Svelte que permite a criação de componentes altamente personalizáveis e reutilizáveis. Você aprendeu como criar slots básicos, slots nomeados, utilizar props de slot e outros aspectos importantes. Ao compreender os diferentes tipos de slots e como empregá-los, você estará apto a desenvolver interfaces de usuário dinâmicas e flexíveis.