Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

335
Vistas
how to remove deprecated $listeners in vue 3

In migration from vue 2 to vue 3, i am getting some compilation warnings. Deprecation of $listeners in components is one of those warnings. I have checked official documentation to use $attrs by removing $listeners. I am new in vue 3. So, not able to understand how to handle those warnings related to listeners.

Here is the snippet: 1st case: Component 1

    <template>
    <div>
        <input ref="input"
               :value="txtField"
               @input="txtField=$event.target.value"
               :type="inputType"
               :class="inputClass"
               :placeholder="placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :onfocus="disabled&&'this.blur();'"
               :tabindex="tabindex"
               v-on="listenersInput" // here is the method where $listeners used
               @keyup.enter="enterHandler"
               @blur="validateOnEvent"/>
     </div>
</template>

//method 

listenersInput() {
            //var vm = this;
            return Object.assign({}, this.$listeners, {
                input: function(event){ /*vm.$emit('input',event.target.value);*/}
            });
        },

2nd case: Component 2

    <template>
    <custom-button v-bind="buttonProps"
                 v-on="$listeners"
                 :class="buttonClass"
                 @click="tooggle"></custom-button>
</template>

How to handle these two cases?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

In Vue 3 $listeners moved to $attrs you can use v-bind="$attrs". Here is an article from docs

Additional documentation: https://vuejs.org/guide/components/attrs.html#nested-component-inheritance

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda