Componentes e Props 🧩

Aula 05 - Modularizando a Interface

🏗️ O Poder dos Componentes

• Divisão lógica da interface
• Reutilização massiva de código
• Facilidade de manutenção (mudar em um lugar, reflete em todos)

📦 Anatomia de um Componente

• Logica: script setup
• Estrutura: template
• Estilo: style scoped

👨‍👧‍👦 Relação Pai e Filho

• Uma aplicação Vue é uma árvore de componentes
• O componente App.vue (Pai) gerencia outros (Filhos)
• Comunicação segura e previsível

📥 Props: Recebendo Dados

• Atributos personalizados que o componente Filho aceita
• Permite que o Pai envie informações para o Filho
• Fluxo de dados Unidirecional (Top-Down)

🛠️ Declarando Props (defineProps)

<script setup>
const props = defineProps({
  titulo: String,
  preco: Number
})
</script>

🚀 Usando no Template

<div>
  <h1>{{ props.titulo }}</h1>
  <p>Preço: R$ {{ props.preco }}</p>
</div>

🔗 Passando Valores do Pai

• Estático: titulo="Meu Produto"
• Dinâmico (Bind): :titulo="variavelReativa"
• Booleanos: apenas o nome da prop indica true

🛡️ Validação de Props

• Podemos tornar uma prop obrigatória: required: true
• Definir um valor padrão: default: 'Texto Padrão'
• O Vue valida em tempo de desenvolvimento!

⚠️ Imutabilidade das Props

• MUITO IMPORTANTE: O Filho não deve alterar a prop!
• Props são "somente leitura" para o componente filho
• Se mudar no pai, atualiza no filho (Reatividade)

🧩 Slots basics (intro)

• E se quisermos passar HTML em vez de apenas texto?
• A tag <slot /> cria um espaço reservado no filho
• O pai coloca o conteúdo dentro da tag do componente

🎨 Exemplo Visual de Props

graph TD
    Pai[Componente Pai] -- Prop: titulo='Alerta' --> Filho[Componente Alerta]
    Pai -- Prop: cor='vermelho' --> Filho
    Filho --> UI[Renderiza na Tela]

📂 Organização sugerida

• /components/base: Botões, Inputs (Básicos)
• /components/layout: Header, Footer, Sidebar
• /components/items: CardProduto, ItemLista

🛠️ PascalCase vs kebab-case

• Nome do arquivo: MeuComponente.vue
• Uso no template: <MeuComponente />
• Facilita a distinção de tags HTML nativas

🏗️ Desafio da Aula

• Criar um componente de Card de Usuário
• Passar dados via Props (Nome, Email, Foto)
• Renderizar uma lista de usuários em App.vue usando v-for e o componente de Card

🏁 Resumo

• Componentes dividem para conquistar
• Props permitem que o Pai fale com o Filho
• Mantenha o fluxo de dados de cima para baixo

🏁 Dúvidas?

Bom código! Próxima aula: Eventos e Comunicação (Emits).