Tutorial VueJS 3 – Comunicar eventos com defineEmits

Os props descem do pai para o filho. Para fazer subir uma informação, um componente emite um evento e o pai escuta-o, exatamente como escutaria um clique.

O problema

Desde a divisão feita no capítulo 8, o carrinho vive em App.vue e o botão em ProductDisplay.vue. O filho não pode modificar cart: não lhe tem acesso, e um componente não deve escrever no estado de outro.

A formulação certa não é «o filho acrescenta ao carrinho», mas «o filho anuncia que houve um clique, o pai decide o que fazer com isso».

Declarar e emitir

No filho, declara os eventos emitidos e depois emite:

<script setup>
const emit = defineEmits(['add-to-cart'])

function addToCart() {
  emit('add-to-cart')
}
</script>

<template>
  <button
    class="button"
    :class="{ disabledButton: !inStock }"
    :disabled="!inStock"
    @click="addToCart"
  >
    Ajouter au panier
  </button>
</template>

O defineEmits é uma macro do compilador, tal como o defineProps: sem import. Devolve a função que serve para emitir.

Declarar os eventos não é obrigatório, mas compensa: a lista documenta o contrato do componente, o editor completa-a automaticamente e o Vue avisa se emitires um nome não declarado.

Escutar do lado do pai

Um evento personalizado escuta-se com a mesma sintaxe de um evento nativo:

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

const cart = ref(0)

function updateCart() {
  cart.value += 1
}
</script>

<template>
  <div class="cart">Panier ({{ cart }})</div>
  <ProductDisplay :premium="premium" @add-to-cart="updateCart" />
</template>

Clica: o contador volta a andar. O botão está no filho, o contador no pai, e nenhum dos dois conhece o estado do outro.

Transmitir um dado

Um carrinho realista guarda o que lá pomos, não apenas quantos. Passa o identificador da variante como segundo argumento do emit:

<script setup>
function addToCart() {
  emit('add-to-cart', variants.value[selectedVariant.value].id)
}
</script>

O pai recebe-o como parâmetro da sua função:

<script setup>
const cart = ref([])

function updateCart(id) {
  cart.value.push(id)
}
</script>

<template>
  <div class="cart">Panier ({{ cart.length }})</div>
  <ProductDisplay :premium="premium" @add-to-cart="updateCart" />
</template>

O cart passou a ser um array, por isso a apresentação usa cart.length. Acrescenta várias vezes a T-shirt azul e confirma nas ferramentas de desenvolvimento do Vue que o array se enche mesmo de 2234.

Para várias informações, emite um objeto em vez de uma longa lista de argumentos:

emit('add-to-cart', { id: variant.id, taille: 'M', quantite: 1 })

O nome dos eventos

Escreve o nome em kebab-case: add-to-cart, não addToCart. Os atributos HTML não distinguem maiúsculas de minúsculas, um template escrito diretamente numa página receberia @addtocart e o listener nunca chegaria a disparar. Num ficheiro .vue, o Vue corrige a caixa, mas mais vale ganhar já o hábito certo.

O sentido de circulação

Uma avaliação que chega por este caminho pode depois ser animada ao aparecer.

Retém estas duas frases: os props descem, os eventos sobem. O pai é dono do dado, o filho pede que ele seja alterado. É isso que torna o fluxo previsível e a origem de uma alteração sempre rastreável.