Como emitir eventos para se comunicar entre componentes Vue

Estruturar seus aplicativos da Web usando uma arquitetura de componentes facilita a criação e a manutenção de seu aplicativo.

A emissão de eventos customizados é uma forma de lidar com a comunicação entre os componentes; adereços e slots são outros dois. Os eventos personalizados permitem que você envie dados do componente filho para o componente pai.

Emita eventos de um filho para seu pai

O Vue oferece muitas opções para comunicação entre componentes. Uma forma significativa de a comunicação entre os componentes é através de props. Props permitem que você envie dados de componentes pai para filho.

O que acontecerá se você quiser enviar dados do componente filho para o componente pai? O Vue permite que você emita eventos personalizados de componentes filhos para pais. Esse processo permite que o componente pai use dados e funções do componente filho.

Por exemplo, imagine um componente de botão com uma função que retorna um valor a cada clique. Você precisará emitir esse evento para o componente pai para permitir que o componente pai atualize seu estado ou execute uma ação com base no valor retornado.

Convenção de nomenclatura para eventos emitidos personalizados no Vue

Antes de mergulhar em como emitir eventos personalizados, você precisa entender a convenção de nomenclatura para eventos personalizados no Vue. Antes do surgimento do Vue 3, os desenvolvedores precisavam estritamente definir eventos personalizados com kebab-case, separando palavras em nomes com um hífen.

Agora é uma prática padrão definir seus eventos personalizados em kebab-case ao trabalhar com modelos HTML e CamelCase ao trabalhar com JavaScript. No entanto, você pode optar por usar qualquer opção ao trabalhar com JavaScript, pois o Vue compila todos os eventos personalizados de volta para kebab-case.

Ao emitir um evento personalizado, transmita a finalidade do evento com um nome descritivo. Isso é muito importante, principalmente quando você está trabalhando em equipe, para deixar claro o objetivo do evento.

Como emitir eventos personalizados do componente filho para o pai

Existem duas maneiras de realizar a emissão de eventos personalizados no Vue. Você pode emitir eventos personalizados em linha (diretamente no modelo Vue) com o $emitir método que o Vue fornece. Você também pode fazer uso do defineEmits macro disponível no Vue 3.

Emitindo eventos personalizados no Vue com o método $emit

$emitir, um método interno do Vue, permite que um componente filho envie um evento para seu componente pai. Você chama esse método em linha (dentro do modelo do componente filho) para acionar o evento personalizado. O método $emit aceita dois argumentos: o nome do evento que você deseja emitir e uma carga útil opcional que pode carregar dados adicionais.

Considere este componente filho que emite um evento para notificar o componente pai sobre um clique de botão:

 ChildComponent.vue 
<roteiroconfigurar>
importar { ref } de 'vue';
post const = ref('')
roteiro>
<modelo>
<div>
<entradatipo="texto"modelo v="publicar">
<botãov on: clique="$emit('botão clicado', postar)">Publicarbotão>
div>
modelo>

Este bloco de código mostra como emitir um evento personalizado de um componente filho. O filho começa inicializando uma variável post com uma string vazia.

O componente filho vincula o elemento de entrada à variável post com v-model, um Diretiva de vinculação de dados Vue. Essa ligação permite que as alterações feitas no campo de entrada atualizem a variável post automaticamente.

O elemento de botão tem uma diretiva v-on que escuta eventos de clique no botão. O clique do botão chama o método $emit com dois argumentos: o nome do evento, "button-clicked" e o valor da variável post.

O componente pai agora pode ouvir o evento personalizado com a diretiva v-on para Manipulando eventos no Vue:

 ParentComponent.vue 
importar { ref } de "vue";
import ChildComponent de "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (postagem) => {
 postList.value.push (post)
}
roteiro>
<modelo>
<div>
<ChildComponent @botão clicado="adicionar Postagens"/>
<ul>
<liv-para="postar na lista de postagens">{{ publicar }}li>
ul>
div>
modelo>

Este bloco de código demonstra um componente pai importando e usando o componente filho anterior. O componente pai define um lista de postagens variável de matriz como uma referência reativa. O componente então define um addPosts função que é executada, tomando um publicar argumento. A função adiciona um novo post ao array postList com o empurrar() método.

O @botão clicado o ouvinte de eventos captura o evento personalizado que o ChildComponent emite quando você clica no botão. Este evento faz com que a função addPosts seja executada. Finalmente, o bloco de código anexa o v-para diretiva para listas de renderização em Vue ao elemento ul para iterar sobre a matriz postList.

Emitindo eventos com a macro defineEmits

O Vue 3 introduziu o defineEmits macro, que define explicitamente os eventos que um componente pode emitir. Essa macro fornece uma maneira segura de emitir eventos que levam a uma base de código mais estruturada.

Aqui está um exemplo de como você pode usar a macro defineEmits e chamá-la em seu componente filho:

 ChildComponent.vue 
<roteiroconfigurar>
importar { ref } de "vue";
const emit = defineEmits(["botão clicado"]);
post const = ref("");
botão constClick = () => {
 emit("botão clicado", post.value);
};
roteiro>
<modelo>
<div>
<entradatipo="texto"modelo v="publicar" />
<botãov on: clique="botãoClique">Publicarbotão>
div>
modelo>

Embora a funcionalidade permaneça a mesma, existem diferenças significativas na sintaxe do código entre o bloco de código acima e aquele com o $emitir função.

Neste bloco de código, o defineEmits macro define o botão clicado evento. Ao chamar esta macro, o bloco de código retorna uma função $emit, permitindo que você emita os eventos definidos. A matriz passada para a macro defineEmits dentro do componente conterá todos os eventos que você precisa emitir para o componente pai.

Em seguida, o bloco de código define um botãoClique função. Esta função emite o evento de botão clicado e a variável post para o componente pai. O bloco de modelo do componente filho abriga um elemento de botão.

O elemento de botão tem um v on: clique diretiva acionando a função buttonClick. O componente pai pode usar o componente filho da mesma forma que fazia com o método $emit.

Os desenvolvedores Vue se beneficiam de uma arquitetura baseada em componentes

Você pode se comunicar de um componente filho para seu pai emitindo eventos usando o método $emit e a macro defineEmits.

Você pode se beneficiar da arquitetura baseada em componentes do Vue, pois permite que você escreva um código mais estruturado e conciso. Com estruturas JavaScript modernas como Vue, você pode usar Web Components, um padrão da Web W3C, para obter essa arquitetura baseada em componentes.