Vue.js

# $listeners removido
breaking

# Visão Geral

O objeto $listeners foi removido no Vue 3. Os escutadores de eventos agora fazem parte do $attrs:

{
  text: 'este é um atributo',
  onClose: () => console.log('Evento close acionado')
}
1
2
3
4

# Sintaxe v2.x

No Vue 2, você pode acessar atributos passados ​​para seus componentes com this.$attrs, e escutadores de eventos com this.$listeners. Em combinação com inheritAttrs: false, eles permitem que o desenvolvedor aplique esses atributos e escutadores a algum outro elemento em vez do elemento raiz:

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>
1
2
3
4
5
6
7
8
9
10

# Sintaxe v3.x

No DOM virtual do Vue 3, os escutadores de eventos agora são apenas atributos, prefixados com on, e como tal 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>
1
2
3
4
5
6
7
8
9
10

Se este componente recebeu um atributo id e um escutador v-on:close, o objeto $attrs agora ficará assim:

{
  id: 'my-input',
  onClose: () => console.log('Evento close acionado')
}
1
2
3
4

# Estratégia de Migração

Remova todos os usos de $listeners.

Sinalizador na compilação de migração: INSTANCE_LISTENERS

# Veja também

← Alterações na API de Montagem →