Exercícios: Aula 06 - Eventos e Comunicação 📡

1. Para que serve o Emits?

Explique a diferença entre usar Props e usar Emits. Qual das duas ferramentas é usada para enviar dados do filho para o pai?

2. Disparando um Evento Simples

Crie um componente ContadorFilho.vue com um botão "Incrementar". - Ao clicar no botão, o componente deve emitir um evento chamado aumentar. - No componente Pai (App.vue), escute o evento @aumentar e incremente uma variável reativa local.

3. Enviando Dados (Payload) no Evento

Modifique o exercício anterior para que o filho envie o valor do incremento (ex: 5 ou 10) como argumento do evento. emit('aumentar', 5). Como o pai recebe esse valor na função de tratamento?

4. Comunicação entre Irmãos

Imagine dois componentes filhos (A e B) no mesmo nível dentro de um Pai. O Filho A tem um botão que precisa mudar um texto no Filho B. Descreva os passos necessários para que essa comunicação ocorra seguindo o fluxo padrão do Vue.

5. Desafio: Deletar item da Lista

Utilize a galeria de produtos do exercício da aula anterior. - Adicione um botão "Remover" dentro do componente ItemProduto.vue. - Ao clicar em "Remover", o componente deve emitir um evento remover passando o id do produto. - O componente Pai deve ouvir o evento e remover o produto correspondente do array original.