Como utilizar as Slots no Svelte

O Svelte oferece diferentes formas de os componentes comunicarem uns com os outros, incluindo props, slots, etc. Terá de integrar slots para criar componentes flexíveis e reutilizáveis nas suas aplicações Svelte.

Entendendo os slots no Svelte

No contexto do framework Svelte, os slots funcionam de forma análoga às suas contrapartes no ecossistema Vue, permitindo a transferência de dados de um elemento pai para um componente filho através de espaços designados como placeholder no layout deste último.

Trabalhar com slots no Svelte permite um elevado grau de flexibilidade na criação de componentes que podem ser adaptados a vários cenários através da utilização de texto simples, marcação HTML ou componentes adicionais do Svelte. A incorporação de slots facilita o desenvolvimento de elementos versáteis e adaptáveis que atendem a diversas necessidades.

Criando um Slot Básico

Para incorporar um slot dentro do layout de um componente Svelte, utilize a construção colocada dentro do modelo do referido componente. Este espaço reservado foi concebido para aceitar e apresentar o material que tem origem na sua entidade-mãe correspondente. Ao mesmo tempo, por defeito, esta ranhura apresentará qualquer substância que seja inserida nela.

A incorporação de ranhuras numa função definida pelo utilizador pode ser conseguida definindo cada parâmetro necessário na assinatura da função, como demonstrado abaixo:

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

O trecho de código fornecido mostra uma instância de um componente filho, que emprega a utilização de uma área designada conhecida como “ranhura” para receber conteúdo do seu componente pai associado.

Para transmitir dados de um elemento pai para um elemento filho no desenvolvimento Web, é necessário introduzir inicialmente o elemento filho no elemento pai por meio de importação. Posteriormente, em vez de utilizar uma marcação de auto-conclusão para renderizar o elemento filho, utilize um marcador de abertura e de fecho. Por fim, dentro dos limites das etiquetas abrangentes, articule a informação que se pretende transmitir entre os elementos pai e 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 component</span>
 </Component>
</main>

No caso de um componente principal não fornecer conteúdo para as ranhuras dos seus componentes secundários, pode ser fornecido conteúdo predefinido ou de recurso nessas ranhuras. Este serve como o material apresentado quando não é fornecido conteúdo pelo componente principal de origem.

Para fornecer conteúdo alternativo em caso de erro, pode utilizar-se o atributo “fallback” na marcação SVG da seguinte forma:

 <main>
  This is the child component
  <slot>Fallback Content</slot>
</main>

O fragmento de código fornecido serve como opção de reserva, apresentando a frase “Fallback Content” na ranhura designada quando não é fornecido material alternativo pelo elemento principal.

Passagem de dados através da ranhura com adereços de ranhura

O Svelte permite a transmissão de informação através da utilização de “adereços de ranhura” com o objetivo de fornecer detalhes específicos dentro de uma área designada, muitas vezes referida como uma “ranhura”, que está situada dentro de outro componente. Este processo ocorre quando existe a necessidade de transmitir pormenores de um componente para outro durante a execução deste último.

Por exemplo:

 <script>
  let message = 'Hello Parent Component!'
</script>

<main>
  This is the child component
  <slot message={message}></slot>
</main>

O trecho de código fornecido constitui um componente Svelte. Dentro de uma tag , uma variável nomeada ‘message’ é declarada e recebe o valor de “Hello Parent Component!”. Além disso, a variável ‘message’ é passada como um argumento para a propriedade ‘slot’ com o mesmo nome. Consequentemente, isto permite que o componente principal forneça conteúdo a esta ranhura “message” designada, fornecendo informações contextualmente relevantes para apresentação em vez da cadeia de caracteres “Hello Parent Component!”.

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:message>
 <div>
 The child component says {message}
 </div>
 </Component>
</main>

A utilização da sintaxe permite que o componente principal tenha acesso à propriedade da ranhura message fornecida pelo componente secundário, em que o conteúdo contido no elemento deriva diretamente da ranhura supramencionada.

É importante notar que a utilização de uma única propriedade de ranhura pode ser insuficiente em certos casos. Nesses casos, pode ser necessário utilizar várias ranhuras para acomodar informações ou requisitos adicionais.

 <script>
  let user = {
    firstName: 'John',
    lastName: 'Doe'
  };
</script>

<main>
  This is the child component
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

No componente principal:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:firstName let:lastName>
 <div>
 The user's name is {firstName} {lastName}
 </div>
 </Component>
</main>

Trabalhar com ranhuras nomeadas

Ao utilizar ranhuras nomeadas nos seus componentes, estas proporcionam um meio eficiente de passar várias ranhuras, dotando-as de designações distintas. Esta abordagem facilita a gestão mais eficaz de várias ranhuras e permite a criação de componentes complexos que exibem diversas configurações.

é necessário indicar a etiqueta ou o título da localização pretendida para que o conteúdo do recetáculo seja atribuído à vontade.

 <div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

Considere o caso em que temos dois receptáculos identificáveis, nomeadamente a designação “cabeçalho” e a denominação “rodapé”. Utilizando a propriedade versátil “ranhura”, é possível transmitir dados para qualquer um destes compartimentos a partir de um elemento constituinte de nível superior dentro da estrutura hierárquica.

Por exemplo:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span slot="header">This will be passed to the header slot</span>
 <span slot="footer">This will be passed to the footer slot</span>
 </Component>
</main>

O código fornecido ilustra o processo de utilização dos atributos “slot” e “prop” para transmitir conteúdo a ranhuras designadas. No elemento inicial " “, a ranhura “header” é direccionada atribuindo ao atributo “slot” um valor de “header”. Consequentemente, o texto incluído será apresentado na ranhura “header” designada. Repetindo esta abordagem para o segundo elemento " “, a ranhura “footer” é acedida através da atribuição do valor do atributo “slot” a “footer”, apresentando assim o texto contido na ranhura “footer” especificada.

Compreender o reencaminhamento de ranhuras

O reencaminhamento de ranhuras, um aspeto da estrutura Svelte, permite a transferência de dados de um elemento pai para um elemento filho através de um componente intermediário ou de invólucro. Esta funcionalidade facilita a passagem de informação entre elementos desligados e proporciona flexibilidade na gestão de interfaces de utilizador complexas.

Considere o processo de implementação do reencaminhamento de ranhuras num ecossistema dinâmico, em que os passos necessários envolvem a criação de um componente filho, como se segue:

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

Em seguida, cria-se o componente envolvente:

 <script>
    import Component from "./Component.svelte";
</script>

<main>
    <Component>
        <div slot='message'>
            <slot name="wrapperMessage"></slot>
        </div>
    </Component>
</main>

Neste trecho de código, uma etiqueta de variável predefinida está a ser introduzida no pacote de dados transmitidos da estrutura de interface subordinada.

No componente principal, é possível incorporar o trecho de código acima mencionado para obter a funcionalidade desejada de renderizar um componente de acordeão com conteúdo expansível com base nos dados fornecidos através de adereços. Isto permite uma interação dinâmica e interactiva do utilizador com o componente de acordeão, melhorando a experiência geral do utilizador.

 <script>
 import Wrapper from "./Wrapper.svelte";
</script>

<main>
 This is the parent component
 <Wrapper>
 <div slot="wrapperMessage">
 This is from the parent component
 </div>
 </Wrapper>
</main>

A arquitetura supramencionada facilita a transmissão da mensagem “Isto é do componente principal”, que atravessa o componente de revestimento a caminho de ser recebida pelo componente secundário, utilizando a ranhura wrapperMessage posicionada no elemento de revestimento.

Facilite sua vida com os slots do Svelte

Os slots são um atributo excecional do Svelte que permite a criação de elementos altamente personalizados e intercambiáveis. Neste curso, foi apresentado à criação de slots fundamentais, slots identificados, utilização de propriedades de slots e assim por diante.Ao compreender as diversas variedades de ranhuras e a sua implementação, é possível construir designs de interface de utilizador adaptáveis e versáteis.