Suppose you have a component my-select
, with a template like
<template>
<div class='my-select'>
<MyButton v-bind="attrs"/>
...
</div>
</template>
MySelect
does not inherit attrs, instead it binds whatever extra that you pass to the child MyButton
component.
The problem: if you pass a valid MyButton
prop to MySelect
like size="sm", volar will complain
Object literal may only specify known properties, and 'size' does not exist in type
My thought was to take advantage of vue 3.3 improved defineProps type support by exporting type MyButtonProp and using in MySelect
const props = defineProps<MyButtonProps & {
...
}>()
Which fixes the volar error, but now those button props are inside props
with other MySelect props, not inside of useAttrs()
like I want.
What's the right way to handle this type of situation?