buttonclass="p-3rounded-3xlshadow-mdfont-boldm-4px-10border-2">
So I have a button that I want to use multiple times, as a component with a slot
But when I wanted to use it, I couldn't use @click="method" on the slot button, so I used a nested button (I had a slot button and then another button just to Use @click="method"):
This works, but it's invalid HTML. How can I solve it?
Vue3 SFC Playground
You need to use
v-bind="$attrs"
to bind the properties of the button component toin the template, and disable the For default attribute inheritance, use
inheritAttrs:false
.Also, you don't need to use named slots here, just use the default ones:
Parent component: