Aula 05 – Componentes e Props 🧩

A componentização é o coração do Vue.js. Em vez de uma página monolítica, dividimos a UI em pequenas peças independentes e reutilizáveis chamadas Componentes.

---

🏗️ Criando seu Primeiro Componente

Um componente no Vue é um arquivo .vue que pode ser importado por outros.

1. Crie src/components/CardUsuario.vue:

<template>
  <div class="card">
    <h2>{{ nome }}</h2>
    <p>{{ profissao }}</p>
  </div>
</template>

<script setup>
// Definindo o que o componente recebe de fora (Props)
defineProps(['nome', 'profissao'])
</script>

<style scoped>
.card { border: 1px solid #ccc; padding: 10px; border-radius: 8px; }
</style>

---

📥 Props: Comunicação Pai → Filho

As Props são canais de entrada de dados. Servem para passar informações do componente pai para o filho.

No arquivo App.vue (Pai):

<template>
  <h1>Meus contatos:</h1>

  <!-- Usando o componente e passando dados via Props -->
  <CardUsuario nome="Ricardo" profissao="Desenvolvedor" />
  <CardUsuario nome="Maria" profissao="Designer" />
</template>

<script setup>
import CardUsuario from './components/CardUsuario.vue'
</script>

graph TD
    App[App.vue - Pai] -- "Passa: nome='Ricardo'" --> Card[CardUsuario.vue - Filho]

---

🛡️ Validação de Props

É uma boa prática definir explicitamente o tipo e se a prop é obrigatória para evitar erros de desenvolvimento.

defineProps({
  nome: {
    type: String,
    required: true
  },
  idade: {
    type: Number,
    default: 18 // Valor caso não seja passado
  }
})

---

🧠 Conceitos Chave

Componentes são Legos

Pense nos componentes como peças de Lego. Cada peça tem uma função específica e pode ser usada em diferentes lugares do "castelo" (sua aplicação).

---

💻 Mão na Massa

Crie um componente chamado AlertaMensagem.vue que receba uma prop tipo (pode ser 'sucesso' ou 'erro') e uma prop mensagem. Use o v-if para mudar a cor de fundo baseado no tipo.

---

📝 Exercício

1. O que são Props e qual a direção que os dados fluem ao usá-las?
2. Por que é importante usar o atributo scoped no estilo de um componente?
3. Crie um componente CardProduto.vue que receba nome, preço e uma booleana disponivel.

🚀 Próxima Aula: Como o componente filho avisa o pai que algo aconteceu? Descubra os Emits!