Eventos e Comunicação 📡

Aula 06 - Componente Filho falando com o Pai

🔄 Relembrando Fluxo de Dados

• Pai -> Filho: Via Props (Unidirecional)
• Filho -> Pai: Via Eventos (Emits)
• Comportamento padrão: "Data down, Actions up"

📢 O que são Emits?

• Capacidade de um componente disparar um aviso
• O componente não sabe quem está ouvindo
• Ele apenas diz: "Ei, algo aconteceu aqui!"

🛠️ Declarando Eventos (defineEmits)

<script setup>
const emit = defineEmits(['remover', 'salvar'])

function acao() {
  emit('remover')
}
</script>

👂 Ouvindo no Pai

• No template do componente Pai, usamos @

  <MeuBotao @remover="deletarItem" />
  

• O Pai associa o evento do filho a uma função local

📦 Enviando Dados (Payload)

• O componente filho pode enviar dados no evento:

  emit('adicionar-carrinho', { id: 1, qtd: 2 })
  

• O Pai recebe esse objeto como argumento da função

🏗️ Exemplo no Pai com Dados

function tratarAdicao(produto) {
  carrinho.value.push(produto)
}

🤝 Comunicação entre Irmãos

• Como o Irmão A fala com o Irmão B?
• Padrão:
• Filho A emite evento para o Pai
• Pai atualiza um dado reativo
• Pai passa esse dado via Prop para o Filho B

📊 Fluxo Visual de Comunicação

graph TD
    FilhoA[Filho A] -- 1. Emit: 'mudou' --> Pai[Componente Pai]
    Pai -- 2. Atualiza State --> Pai
    Pai -- 3. Prop: ':dado' --> FilhoB[Filho B]
    FilhoB -- 4. Reatividade --> UI[Tela Atualiza]

🛠️ Modificadores de Emits

• No Vue 3, eventos customizados não borbulham automaticamente
• Eles funcionam de forma mais isolada e segura que eventos nativos do DOM

👨‍🎨 Desenhando Eventos

• Sempre prefira nomes de eventos em kebab-case no template
• Ex: @click-botao em vez de @clickBotao

🧪 Validação de Emits

• Também podemos validar os dados enviados!
• Em vez de um array, passamos um objeto para defineEmits com funções de validação

🏗️ Prática: Lista de Tarefas (V2)

• Componente TaskForm: Emite nova tarefa criada
• Componente TaskItem: Emite ID para exclusão
• Componente App.vue: Gerencia o array e ouve os dois

🔭 O que não fazer?

• Evite que o Filho tente mudar o array do Pai diretamente (mutação de prop)
• Sempre peça ao Pai para realizar a mudança
• Mantém a lógica centralizada e previsível

🏁 Resumo

• Use @ (v-on) para ouvir o filho
• Use emit() para avisar o pai
• Eventos podem levar dados extras (payload)

🏁 Dúvidas?

Ótima aula a todos! Próxima aula: Ciclo de Vida e Hooks.