🚀 Capítulo 11: Slots - Compartimentos

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o que são os Slots no Vue.js e saberá como usá-los para passar não apenas dados, mas blocos inteiros de HTML de um componente Pai para um componente Filho.

---

🏢 O Cenário Prático (Seu Desafio)

As naves de carga precisam transportar diferentes tipos de mercadorias: às vezes caixas de comida, às vezes droides, às vezes armas. Seu desafio é criar um componente chamado Container que tenha um espaço vazio (um Slot) onde o Pai possa colocar qualquer tipo de conteúdo dentro!

---

🧠 Fundamentos: A Teoria Traduzida

Até agora, passamos dados para os componentes filhos usando Props (que aceitam textos, números, etc.). Mas e se quisermos passar uma estrutura HTML inteira (com parágrafos, imagens e botões)? É para isso que servem os Slots.

Pense no Slot como um buraco ou um “compartimento vazio” que você deixa no componente Filho. O componente Pai decide o que vai colocar lá dentro.

Como usar:

• No Filho: Você coloca a tag <slot></slot> onde quer que o conteúdo apareça.
• No Pai: Você escreve o conteúdo dentro da tag do componente.

---

📖 Exemplo Guiado: Container de Carga

Vamos criar o componente de Container.

🛠️ Passo a Passo (Criando o Filho: Container.vue)

Crie o arquivo src/components/Container.vue:

<template>
  <div class="caixa">
    <h3>📦 Compartimento de Carga</h3>
    <hr />
    <!-- O conteúdo enviado pelo pai vai aparecer aqui -->
    <slot></slot>
  </div>
</template>
 
<style scoped>
.caixa {
  border: 2px dashed #ffe81f;
  padding: 15px;
  margin: 10px;
  background-color: #333;
}
</style>

🛠️ Passo a Passo (Usando no Pai: App.vue)

<template>
  <div>
    <h1>🛸 Carregando a Nave</h1>
    
    <!-- Passando texto simples -->
    <Container>
      <p>Rações de comida para os rebeldes.</p>
    </Container>
 
    <!-- Passando uma estrutura complexa -->
    <Container>
      <h4>🤖 Unidade R2-D2</h4>
      <button @click="reparar">Iniciar Reparos</button>
    </Container>
  </div>
</template>
 
<script setup>
import Container from './components/Container.vue';
 
function reparar() {
  alert('Bip bop! Reparando...');
}
</script>

🕹️ Como Executar e Testar no VS Code

1. Salve os arquivos e veja o navegador.
2. Você verá dois containers amarelos pontilhados, cada um com um conteúdo totalmente diferente dentro!

---

🛠️ Prática Obrigatória 1

O Vue permite criar Slots Nomeados quando você precisa de mais de um espaço. Pesquise como usar <slot name="cabecalho"> e tente criar um cabeçalho personalizado para o seu container.

---

🛠️ Prática Obrigatória 2

Passe um conteúdo padrão dentro da tag <slot>Conteúdo Padrão</slot> no filho. Ele só deve aparecer se o pai não enviar nada.

---

🔑 Gabarito de Código/Fórmulas

Prática 2:

No Container.vue:

<slot>Vazio (Nenhuma carga detectada)</slot>

---

← Capitulo Anterior | Proximo Capitulo →