📊 Capítulo 07: Slots & Scoped Slots
Especialização em Frontend com Vue.js
🗺️ Distribuição de Conteúdo com Named Slots e Scoped Slots
flowchart TD
PAI["Template do Pai: <AppTabela :itens='usuarios'>\n <template #linha='{ item }'>\n <span class='badge'>{{ item.nome }}</span>\n </template>\n</AppTabela>"]
--> COMP["Componente AppTabela"]
COMP --> S1["<slot name='header'>Cabeçalho Padrão</slot>"]
COMP --> S2["<slot name='linha' :item='user'></slot> (Scoped Slot passa dados do filho para o pai!)"]
style PAI fill:#ede7f6,stroke:#512da8,stroke-width:2px
style COMP fill:#fff3e0,stroke:#ff9800,stroke-width:2px
style S1 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
style S2 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
🎯 Slide 1: Slots Nomeados com a Abreviação #
<!-- No Pai -->
<ModalDialog>
<template #titulo>
<h3>Confirmar Exclusão</h3>
</template>
<p>Tem certeza de que deseja apagar o registro?</p>
<template #acoes>
<button @click="deletar">Sim</button>
</template>
</ModalDialog>
🎯 Slide 2: Scoped Slots (Inversão de Controle)
- Permite que o componente filho decida quando e como iterar, mas delega para o componente pai a decisão de como renderizar visualmente cada item individual!
🎯 Slide 3: Fallback Content
<slot name="icone">
<!-- Renderizado apenas se o pai não passar nenhum ícone customizado! -->
<i class="icone-padrao"></i>
</slot>
🔗 Navegação do Capítulo 07
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim