🧩 Exercícios Práticos: Slots Padrão, Nomeados e Scoped Slots

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 07.1 — Slot Padrão (Default Slot) com Conteúdo Fallback

Contexto: Slot Padrão (Default Slot) com Conteúdo Fallback no contexto de Slots Padrão, Nomeados e Scoped Slots.

Requisitos de Execução:

  1. Criar componente CardContainer.vue com <slot>Conteúdo padrão</slot>.

Resultado Esperado

Slot renderizado com conteúdo passado pelo pai ou fallback.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_1_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Slots Padrão, Nomeados e Scoped Slots
🔑 Gabarito de Código & Solução Comentada 
<!-- CardContainer.vue -->
<template>
  <div class="card-box">
    <slot>
      <p class="text-muted">Nenhum dado disponível.</p>
    </slot>
  </div>
</template>

🔍 Nível 2: Prática

Problema 07.2 — Slots Nomeados com e

Contexto: Slots Nomeados com e no contexto de Slots Padrão, Nomeados e Scoped Slots.

Requisitos de Execução:

  1. Criar componente ModalDialog.vue com seções nomeadas e consumir usando <template #header>.

Resultado Esperado

Modal estruturado com cabeçalho, corpo e rodapé preenchidos via slots nomeados.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_2_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Slots Padrão, Nomeados e Scoped Slots
🔑 Gabarito de Código & Solução Comentada 
<!-- ModalDialog.vue -->
<template>
  <div class="modal-card">
    <header><slot name="header"><h4>Título Padrão</h4></slot></header>
    <main><slot /></main>
    <footer><slot name="footer" /></footer>
  </div>
</template>

⚡ Nível 3: Integração

Problema 07.3 — Scoped Slots (Slots Escopados) com Passagem de Dados do Filho para o Pai

Contexto: Scoped Slots (Slots Escopados) com Passagem de Dados do Filho para o Pai no contexto de Slots Padrão, Nomeados e Scoped Slots.

Requisitos de Execução:

  1. Criar componente de lista genérica passando cada item para o slot pai com <slot :item='item' />.

Resultado Esperado

Pai customiza o layout de renderização de cada linha da lista.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_3_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Slots Padrão, Nomeados e Scoped Slots
🔑 Gabarito de Código & Solução Comentada 
<!-- ListaGenerica.vue -->
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>();
</script>

<template>
  <ul>
    <li v-for="(item, idx) in items" :key="idx">
      <slot :item="item" :index="idx">{{ item }}</slot>
    </li>
  </ul>
</template>

🏆 Nível 4: Desafio Corporativo

Problema 07.4 — Componente Headless Table com Scoped Slots e Ordenação

Contexto: Componente Headless Table com Scoped Slots e Ordenação no contexto de Slots Padrão, Nomeados e Scoped Slots.

Requisitos de Execução:

  1. Desenvolver tabela headless que gerencie ordenação internamente e delegue visualização das células aos slots.

Resultado Esperado

Tabela headless flexível reutilizável em todo o ecossistema corporativo.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_4_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Slots Padrão, Nomeados e Scoped Slots
🔑 Gabarito de Código & Solução Comentada 
<!-- HeadlessTable.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps<{ dados: any[] }>();
const ordenacao = ref({ coluna: '', asc: true });
</script>

<template>
  <table>
    <thead><slot name="head" :sort="ordenacao" /></thead>
    <tbody>
      <tr v-for="linha in dados" :key="linha.id">
        <slot name="row" :row="linha" />
      </tr>
    </tbody>
  </table>
</template>
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos