how to properly accept props for child in vue

102 Views Asked by At

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?

0

There are 0 best solutions below