Allow components passed as slot prop to be used in the slot
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
Maybe you should use dynamic components rendering?
<Table v-slot="{ Column }">
<component :is="Column"></component>
</Table>
@Alfred-Skyblue yes, this would work, but it gets kinda cumbersome and is very unintuitive. Usually you can just use any variable from your script section and render it as a component. Why the limitation for slotprops? The developer usually doenst know the internals and assumes that it just works "the same"
// EDIT: I just tested it, and it doesnt show it. In fact, its not visible anywhere (no console warnings, nothing in the html). Weird