Aula 06 – Eventos e Comunicação entre Componentes 📡

Já sabemos como enviar dados para baixo (Pai → Filho) com Props. Mas e se o filho precisar avisar ao pai que um botão foi clicado ou um formulário foi preenchido? Usamos Events (Emits).

📤 Emitindo Eventos (Filho → Pai)

O componente filho "grita" um evento e o pai fica "ouvindo".

1. No Componente Filho (`BotaoAcao.vue`):

<template>
  <button @click="enviarClique">Clique aqui!</button>
</template>

<script setup>
// Declarando quais eventos este componente pode emitir
const emit = defineEmits(['clicouNoBotao'])

function enviarClique() {
  // Emitindo o evento com um dado opcional
  emit('clicouNoBotao', 'Dados enviados do filho')
}
</script>

2. No Componente Pai (`App.vue`):

<template>
  <!-- Ouvindo o evento com @ (assim como @click) -->
  <BotaoAcao @clicou-no-botao="tratarEvento" />

  <p>Mensagem recebida: {{ mensagem }}</p>
</template>

<script setup>
import { ref } from 'vue'
import BotaoAcao from './components/BotaoAcao.vue'

const mensagem = ref('')

function tratarEvento(payload) {
  mensagem.value = payload
}
</script>

📊 Fluxo de Comunicação

sequenceDiagram
    participant P as Pai (App.vue)
    participant F as Filho (BotaoAcao.vue)
    P->>F: Props (Dados)
    Note over F: Usuário interage
    F-->>P: Emit (Evento)

🔄 Comunicação entre Irmãos

Componentes "irmãos" não se comunicam diretamente. * Padrão: O irmão enviador emite para o pai, e o pai passa para o outro irmão via Prop. * Avançado: Veremos no futuro o uso de Stores (Pinia) para estado global.

🧠 Boas Práticas

Nomes de Eventos

Enquanto props usam camelCase no script e kebab-case no HTML, os eventos devem, por convenção, sempre usar kebab-case nos emits: emit('atualizar-lista').

💻 Mão na Massa

Crie um componente ItemTarefa.vue que tenha um botão para "Remover". Ao clicar, ele deve emitir um evento remover passando o ID da tarefa para o pai.

📝 Exercício

Qual a diretiva usada no pai para "ouvir" um evento emitido pelo filho?
Como passamos dados adicionais junto com um evento emitido?
Explique por que componentes irmãos não se falam diretamente.

🚀 Próxima Aula: Vamos conhecer os momentos "mágicos" do Vue com o Ciclo de Vida!