Exercícios: Aula 05 - Componentes e Props 🧩

1. Vantagens da Componentização

Explique brevemente por que dividimos uma aplicação em componentes em vez de manter todo o código em um único arquivo gigante. Como isso ajuda no trabalho em equipe?

2. Criando um Componente de Botão

Crie um arquivo chamado BotãoCustomizado.vue na pasta src/components/. - Esse componente deve aceitar uma prop chamada texto (String). - Renderize o texto dentro de uma tag <button>. - No componente App.vue, importe e use esse botão 3 vezes com textos diferentes.

3. Tipagem e Validação de Props

Modifique o defineProps do exercício anterior para que a prop texto seja obrigatória (required) e possua um valor padrão caso não seja enviada. Como o Vue avisa se passarmos um número em vez de uma string para essa prop?

4. Passando Objetos como Prop

Crie um componente CardUsuario.vue que receba um objeto usuario como prop. O objeto deve conter nome, email e cargo. Renderize essas informações de forma organizada (ex: usando <div>, <h3> e <p>).

5. Desafio: Galeria de Produtos

Crie um array de objetos produtos em App.vue. Cada produto deve ter id, nome e preco. - Crie um componente ItemProduto.vue que receba os dados de um produto via prop. - No App.vue, use um v-for para renderizar o componente ItemProduto.vue para cada item do array.