Subscribe on changes!

Allow components passed as slot prop to be used in the slot

avatar
Jun 12th 2023

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:

  1. 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>
  1. 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

avatar
Jun 12th 2023

Maybe you should use dynamic components rendering?

 <Table v-slot="{ Column }">
    <component :is="Column"></component>
  </Table>
avatar
Jun 12th 2023

@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

avatar
Jun 12th 2023

it does show when i tested it in your playground

avatar
Jun 12th 2023

You are right. This has to be a user error on my site then ^^