Allow components passed as slot prop to be used in the slot #8553
Description
What problem does this feature solve?
Example:
<template>
<SomeComponent v-slot="{ SpecializedComponent }">
<SpecializedComponent />
</SomeComponent>
</template>At the moment, vue does not consider components passed as slot property on render. Instead it complains about "SpecializedComponent" being unknown.
Why is this useful:
- Allow to render parent-child relationships in an easy way:
This basically allows to wrap the inner content of a parent component with some custom styling or whatnot.
A similar concept is used in vue-router to display the current page (<router-view>)
<template>
<Table>
<template #td="{ Child }">
<td style="background: red">
<Child />
</td
</template>
</Table>
</template>- Allow typed components that rely on props passed to the parent component
<template>
<Table :data="typedData" v-slot="{ Column }">
<Column prop="willErrorWithWrongKey" />
<Column v-slot="{ row }">
{{ row.typedProperties }}
</Column>
</Table>
</template>Both cases are extremely useful for different reasons
What does the proposed API look like?
See above or look at this playground