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?