Como um componente filho comunica-se com seu pai?

Question

Accepted Answer

Um filho comunica *para cima* com seu pai ao **emitir eventos**. O pai escuta usando `@event-name`. Isso completa o fluxo de dados unidirecional do Vue: **props para baixo, eventos para cima**. ## Emitindo do filho ```vue ``` ## Ouvindo no pai ```vue ``` O filho não pode (e não deve) modificar os dados do pai diretamente. Em vez disso, ele *pede* ao pai para agir emitindo um evento com uma carga útil; o pai é dono dos dados e faz a alteração. ## Por que isso importa ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Declarar eventos emitidos documenta os "outputs" do componente, permite a verificação de tipo de cargas úteis e impede que o evento seja acidentalmente tratado como um ouvinte DOM nativo. ## Outros padrões de comunicação ```text props + emits → parent ↔ direct child (the default, most common) provide/inject → pass data deep down without prop-drilling Pinia store → shared state across unrelated/distant components v-model → two-way binding (props + emit sugar) ``` ## Por que isso importa Emitir eventos é a forma padrão e previsível para filhos afetarem o estado do pai — preservando o fluxo de dados unidirecional (o que torna os aplicativos mais fáceis de raciocinar e depurar). Conhecer `defineEmits` + `@listener`, e quando atualizar para `provide/inject` ou Pinia para comunicação não pai-filho, cobre o modelo de comunicação de componentes do Vue.