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

209
Vistas
How to use v-bind=$attrs in vue 3?

I am migrating vue 2 application to vue 3. In official docs, it is mentioned that $listeners object has been removed in Vue 3. Event listeners are now part of $attrs. It is taking non-prop attributes (class, style) as well. In my vue 2 application, there is one icon-button custom component and it is looking like this below.

Icon-component:

<template>
    <vu-button v-bind="buttonProps"
               :class="buttonClass"
                v-on="$listeners"         
               @click="buttonToggle">
        <vu-icon v-bind="iconProps"><slot/></vu-icon>
    </vu-button>
</template>

It is used in various other components.

Parent component 1:

<vu-icon-button id="sw1" medium style="left:200px;">home</vu-icon-button>

Parent component 2:

<vu-icon-button class="menu-detail-btn" icon="collapse_menu" icon-type="su" @click="openModal()" size="small"></vu-icon-button>

As of migration strategy, i removed the $listeners but not sure about those non-prop attributes and v-bind tag. How to modify those so it can be used in parent component with attributes?

about 4 years ago · Juan Pablo Isaza
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