🚀 Capítulo 07: Props e Emits - Mensagens

🎯 Objetivo da Aula

Ao final desta aula, você saberá como fazer a comunicação entre componentes: enviando dados do Pai para o Filho via Props e enviando mensagens do Filho de volta para o Pai via Custom Events (Emits).

---

🏢 O Cenário Prático (Seu Desafio)

A nave mãe (Pai) precisa enviar ordens e o nome do esquadrão para o caça X-Wing (Filho). Quando o caça cumprir a missão, ele precisa enviar um sinal (Emit) de volta para a nave mãe avisando que está tudo limpo!

---

🧠 Fundamentos: A Teoria Traduzida

No Vue, a comunicação segue a regra: “Props para baixo, Eventos para cima”.

1. Props (Pai → Filho)

Servem para passar dados para o componente filho. O filho apenas lê esses dados.

• No Vue 3 (Composition API), usamos a função defineProps(['nomeDaProp']) dentro do script para avisar quais propriedades o componente aceita.

2. Emits (Filho → Pai)

Servem para avisar o pai que algo aconteceu no filho.

• Usamos a função defineEmits(['nomeDoEvento']) e depois disparamos o evento com emit('nomeDoEvento').

---

📖 Exemplo Guiado: Comunicação com o Caça

Vamos criar o componente Filho e usá-lo no Pai.

🛠️ Passo a Passo (Criando o Filho: Caca.vue)

Crie o arquivo src/components/Caca.vue (crie a pasta components se não existir):

<template>
  <div style="border: 1px solid #ffe81f; margin: 10px; padding: 10px;">
    <h3>🛸 Caça: {{ nome }}</h3>
    <button @click="avisarMissaoCumprida">Completar Missão</button>
  </div>
</template>
 
<script setup>
// 1. Definimos as Props que vamos receber
defineProps(['nome']);
 
// 2. Definimos os Eventos que podemos enviar
const emit = defineEmits(['sucesso']);
 
function avisarMissaoCumprida() {
  // 3. Disparamos o evento para o Pai ouvir
  emit('sucesso');
}
</script>

🛠️ Passo a Passo (Usando no Pai: App.vue)

<template>
  <div>
    <h1>Base de Comando</h1>
    
    <!-- Passando a prop 'nome' e ouvindo o evento '@sucesso' -->
    <Caca nome="Red 5" @sucesso="reativarEscudos" />
  </div>
</template>
 
<script setup>
import Caca from './components/Caca.vue';
 
function reativarEscudos() {
  alert('Mensagem recebida do Caça! Reativando escudos da base!');
}
</script>

🕹️ Como Executar e Testar no VS Code

1. Salve os arquivos e veja o navegador.
2. Clique no botão dentro do componente do Caça. O alerta vai disparar na tela do Pai!

---

🛠️ Prática Obrigatória 1

Adicione uma nova prop chamada piloto no componente Caca e passe o valor “Luke Skywalker” no App.vue.

---

🛠️ Prática Obrigatória 2

Crie um novo evento chamado fogo no Caça que é disparado quando um botão “Atirar” for clicado. O Pai deve ouvir esse evento e mostrar um alerta escrito “Caça disparou!“.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No Caca.vue:

defineProps(['nome', 'piloto']);
<p>Piloto: {{ piloto }}</p>

---

← Capitulo Anterior | Proximo Capitulo →