Como reutilizar componentes Vue com ranhuras

O Vue fornece vários mecanismos para facilitar a comunicação entre componentes, abrangendo interacções entre componentes não associados, bem como entre um pai e os seus filhos. Estas capacidades são fornecidas através da utilização de props, provide/inject, e slots.

Para facilitar a comunicação entre componentes pai e filho em uma aplicação Vue, é possível utilizar slots.

O que são slots?

A estrutura Vue fornece slots, que funcionam como elementos de espaço reservado dentro do modelo de um componente filho. Esses slots permitem a passagem dinâmica de conteúdo entre os componentes pai e filho.

A passagem de dados e funções dos componentes pai para os componentes filho é facilitada através da utilização de props, enquanto os slots permitem a transferência do conteúdo do modelo dos componentes pai para os componentes filho, promovendo a criação de mais elementos reutilizáveis com conteúdo HTML diversificado.

A sintaxe básica dos slots

O Vue.js foi aclamado por sua aptidão para capacitar o HTML por meio de tags personalizadas, facilitando o desenvolvimento de aplicações Web versáteis. Os mecanismos de slots não são uma exceção. No âmbito da estrutura do Vue, uma etiqueta de ranhura distinta permite a colocação de suportes em componentes secundários, permitindo a inserção de conteúdo HTML.

Pode dar-me um exemplo de uma frase complexa que utilize “considerar” como conjunção subordinativa?

 <!-- ChildComponent.vue -->
<template>
<div>
    <slot></slot>
</div>
</template>

 

Este exemplo ilustra um componente Vue básico que engloba uma ranhura solitária. O componente principal tem a capacidade de fornecer conteúdo para a ranhura dentro do componente secundário, que subsequentemente substitui o elemento da ranhura assim que a estrutura Vue processa o componente secundário para renderização.

Para que um componente pai transmita dados de mídia para seu componente filho no React, ele deve primeiro estabelecer um “slot” apropriado dentro do modelo deste último. Isso pode ser feito passando o conteúdo desejado através de props durante a renderização.

 <!-- ParentComponent -->
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

<template>
<ChildComponent>
  <h1>This is the child component</h1>
</ChildComponent>

<div>
  <h3>This is the parent component</h3>
</div>
</template>
 

O trecho de código mencionado acima mostra um componente pai que importa e emprega o componente filho mencionado anteriormente. O componente filho recebe a mensagem “Este é o componente filho” dentro de sua tag

, e substitui o placeholder pela referida mensagem.

Ao utilizar slots, torna-se possível estabelecer estruturas complexas para uma interface de utilizador e montar diversos elementos de conteúdo dentro dessas estruturas. Este processo revela-se particularmente útil no desenvolvimento de componentes de IU reutilizáveis ou na construção de layouts com segmentos substituíveis.

Dê um nome às suas ranhuras para utilizar mais do que uma

Ao utilizar vários componentes, pode ser necessário designar várias ranhuras dentro de um componente filho, uma vez que podem existir diversos segmentos dentro deste elemento filho, como um cabeçalho e um rodapé ou um título de cartão e o respetivo corpo.

O Vue oferece uma oportunidade para os programadores atribuírem nomenclaturas às ranhuras, permitindo-lhes citar facilmente uma ranhura específica enquanto transferem dados do componente principal.

Por exemplo:

 <!-- ChildComponent.vue -->
<template>
  <div class="card">
    <div class="card-title">
      <slot name="title"></slot>
    </div>

    <div class="card-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
  
<style>
.card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}
  
.card-title {
  font-weight: bold;
  margin-bottom: 10px;
}
  
.card-body {
  margin-bottom: 10px;
}
</style>
 

O fragmento de código acima mencionado mostra um constituinte menor apelidado de cartão, que inclui duas ranhuras designadas com as etiquetas “título” e “corpo”. Estas ranhuras podem ser utilizadas independentemente em virtude dos seus respectivos nomes de atributos, permitindo a inserção de diversos conteúdos nas mesmas.

Para incorporar conteúdo em elementos de espaço reservado específicos utilizando a diretiva “v-slot”, utilize-a no modelo do componente principal.

 <!-- ParentComponent -->
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script>

<template>
  <div>
    <ChildComponent>
      <template v-slot:title>
        <h2>This is the Card Title</h2>
      </template>
      <template v-slot:body>
        <p>This is the Card Body Content.</p>
        <p>It can include multiple paragraphs or any other HTML content.</p>
      </template>
    </ChildComponent>
  </div>
</template>
 

O elemento principal acima mencionado utiliza os serviços do componente secundário, transmitindo dados relativos ao cabeçalho e ao corpo de um cartão. Através da implementação do Vue.js, esta informação é incorporada nos receptáculos apropriados dentro do modelo do componente subsidiário.

A utilização da diretiva v-slot no Vue é comparável à de outras directivas, como a diretiva v-for , utilizada para a renderização de listagens. Da mesma forma, a diretiva v-slot tem de ser afixada a um elemento HTML, normalmente através de uma etiqueta

.

A diretiva

no Vue 3 é similar a outras diretivas por possuir uma notação abreviada denotada pelo sinal de libra (#).

 <template #title>
  <h2>This is the Card Title</h2>
</template>
 

Conteúdo padrão para slots

Um valor padrão pode ser designado para um slot específico em um modelo, que é exibido sempre que nenhum valor é passado do componente pai. Isso pode ser feito incluindo conteúdo dentro do elemento

correspondente.

Por exemplo:

 <template>
  <div>
    <slot>
      <p>Default content for the slot.</p>
    </slot>
  </div>
</template>
 

Se o componente principal não fornecer qualquer material para a ranhura, o Vue utilizará a substância do componente secundário como conteúdo HTML.

Como usar slots com escopo

Os componentes filhos podem se comunicar com seus pais por meio de slots com escopo, que permitem o compartilhamento de dados entre eles. Ao utilizar esses slots, um componente filho pode acessar e exibir informações criadas dentro de seu próprio escopo, permitindo a renderização eficiente de tais detalhes.

Neste exemplo, vou demonstrar-lhe a utilização de

 <!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";

const value = ref("David");

const age = ref(21);
</script>

<template>
  <div>
    <slot :value="value" :age="age"> </slot>
  </div>
</template>
 

O componente filho supramencionado percebe duas propriedades imutáveis, uma que implica uma designação conhecida como “a”, que é da categoria de uma nomenclatura, e outra propriedade que engloba um número inteiro denotado como “b”, que significa uma quantidade aritmética. Posteriormente, esta construção especifica um espaço reservado (slot) e atribui-lhe estas duas propriedades, de forma análoga à utilização de adereços durante a montagem de componentes Vue.

O método acima mencionado permite a extração de valores do componente filho e a sua utilização no componente pai através da implementação das directivas “v-slot” na marcação HTML do elemento filho, permitindo a intercomunicação entre os dois componentes.

 <!-- ParentComponent -->
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

<template>
  <div>
  <ChildComponent v-slot="slotProps">
    {{ slotProps.value }} is {{ slotProps.age }} years old.
  </ChildComponent>
  </div>
</template>
 

A diretiva v-slot, que é anexada à etiqueta ChildComponent, permite que o componente principal obtenha dados do componente secundário e os utilize no conteúdo da ranhura. O objeto slotProps serve de meio para partilhar esses dados.

Dentro do conteúdo da ranhura especificada, os valores de {{ slotProps.value }} e {{ slotProps.age }} são interpolados, o que é um método utilizado pelo VueJS para ligar dados dentro de modelos.

A utilização de ranhuras designadas requer

 <!-- ParentComponent -->
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script>

<template>
  <div>
    <ChildComponent>
      <template #title="titleProps">
        <h2>{{ titleProps.title }}</h2>
      </template>
      <template #body="bodyProps">
        <p>{{ bodyProps.body }}</p>
      </template>
    </ChildComponent>
  </div>
</template>
 

O trecho de código acima ilustra a utilização de um componente filho por um componente pai. O componente principal utiliza o elemento

e a diretiva v-slot , utilizando a notação abreviada para referenciação. A primeira permite que a segunda aceda a informações do componente filho enquanto gera conteúdo HTML.

O componente secundário que acompanha e que está a ser utilizado pelo componente fundamental

 <!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";
const cardTitle = ref("This is the card title.");
const cardBody = ref("This is the card body content.");
</script>

<template>
  <div class="card">
    <div class="card-title">
      <slot name="title" :title="cardTitle"></slot>
    </div>
    <div class="card-body">
      <slot name="body" :body="cardBody"></slot>
    </div>
  </div>
</template>
 

O componente secundário acima mencionado utiliza ranhuras designadas, para fazer a distinção entre eles. É imperativo que o atributo name sirva como um identificador sem paralelo para uma etiqueta de ranhura, uma vez que este parâmetro é exclusivamente reservado pelo Vue. Adicionalmente, o componente filho acima referido transfere os valores dos atributos title e body para o seu componente pai.

As ranhuras não são a única caraterística dos componentes Vue

As ranhuras são um aspeto integral do Vue que permite a criação de componentes reutilizáveis com conteúdo personalizado. A compreensão da sintaxe e da aplicação dos slots permite que os programadores construam aplicações Vue.js mais versáteis e modulares.

O Vue oferece vários componentes-chave, incluindo blocos de construção compostáveis e adereços de comunicação entre componentes, que são essenciais para um desenvolvimento proficiente. Para se destacar neste domínio, é necessário possuir uma compreensão abrangente destas ferramentas fundamentais.