As I venture into creating my own component library by wrapping some PrimeVue components, I am faced with the challenge of handling numerous slots.
Many PrimeVue components come with a large number of slots, and passing each one individually seems like a daunting task.
Luckily, I stumbled upon this ingenious solution that allows for passing all slots from Parent to Child Component seamlessly.
For instance, consider the following implementation using the PrimeVue Dropdown component:
<Dropdown v-bind="$attrs" >
<template v-for="(_, name) in $slots" #[name]="scope">
<slot :name v-bind="scope" />
</template>
</Dropdown>
However, an issue arises when working with TypeScript as it raises an error on #[name] due to the absence of an index signature on type 'DropdownSlots':
Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type 'DropdownSlots'.
No index signature with a parameter of type 'string' was found on type 'DropdownSlots'. ts(7053)
Are there any suggestions for a workaround to this problem?