Opção `emits`
novo

Visão Geral

A Vue 3 agora oferece uma opção emits, semelhante à opção props existente. Esta opção pode ser usada para definir os eventos que um componente pode emitir ao seu pai.

Comportamento da 2.x

Na Vue 2, podemos definir as propriedades que um componente recebe, mas não podemos declarar quais eventos pode emitir:

vue

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text']
  }
</script>

Comportamento da 3.x

Semelhante às propriedades, os eventos que o componente emite agora podem ser definido com a opção emits:

vue

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

A opção também aceita um objeto, que permite o programador definir validadores para os argumentos que são passados com o evento emitido, semelhante aos validadores nas definições de props.

Para mais informação sobre isto, leia a documentação da API para esta funcionalidade.

Estratégia de Migração

É altamente recomendado que documentamos todos os eventos emitidos por cada um dos nossos componentes usando emits.

Isto é especialmente importante porque da remoção do modificador .native. Quaisquer ouvintes para eventos que não são declarados com emits agora serão incluídos na $attrs do componente, que por padrão serão vinculados ao nó de raiz do componente.

Exemplo

Para os componentes que re-emitem eventos nativos aos seus pais, este agora conduziria à dois eventos sendo disparados:

vue

<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: [] // sem evento declarado
}
</script>

Quando um pai ouve o evento de click sobre o componente:

html

<my-button v-on:click="handleClick"></my-button>

Agora seria acionado duas vezes:

Uma vez a partir da $emit().
Uma vez a partir do ouvinte de evento nativo aplicado ao elemento de raiz.

Eis que temos duas opções:

Declarar apropriadamente o evento click. Isto é útil se de fato adicionarmos alguma lógica à este manipulador de evento no <my-button>.
Remover a re-emissão do evento, uma vez que o pai agora pode ouvir o evento nativo facilmente, sem adicionar .native. Adequada quando realmente apenas re-emitimos o evento de qualquer modo.

Opção emits novo ​

Visão Geral ​

Comportamento da 2.x ​

Comportamento da 3.x ​

Estratégia de Migração ​

Exemplo ​