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?