$listeners removido

rutura

Visão Geral

O objeto $listeners foi removido na Vue 3. Os ouvintes de evento agora são parte de $attrs:

{
  text: 'this is an attribute',
  onClose: () => console.log('close Event triggered')
}

Sintaxe da 2.x

Na Vue 2, podemos acessar os atributos passados aos nossos componentes com this.$attrs, e os ouvintes de evento com this.$listeners. Em combinação com inheritAttrs: false, permitem o programador aplicar estes atributos e ouvintes à algum outro elemento ao invés do elemento de raiz:

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

Sintaxe da 3.x

No DOM virtual da Vue 3, os ouvintes de evento agora são apenas atributos, prefixados com on, e como tais são parte do objeto $attrs, então $listeners foi removido:

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

Se este componente recebesse um atributo id e um ouvinte v-on:close, o objeto $attrs agora parecer-se-á com isto:

{
  id: 'my-input',
  onClose: () => console.log('close Event triggered')
}

Estratégia de Migração

Remover todos os usos de $listeners.

Opção da Construção de Migração: INSTANCE_LISTENERS

Consulte também

• RFC Relevante
• Guia de Migração - $attrs inclui class & style
• Guia de Migração - Mudanças na API de Funções de Interpretação
• Guia de Migração - Nova Opção emits
• Guia de Migração - modificador .native removido