Skip to content

Passing slots through in wrapper component #11478

Open
@tminich

Description

@tminich

Version

2.6.11

Reproduction link

https://codesandbox.io/s/romantic-mahavira-1s4v6

Steps to reproduce

See the content below "Wrapper"

What is expected?

All three variants, deprecated and new syntax in either order, should produce the same result

What is actually happening?

All produce different results. In the example the final 'new syntax' variant seems fine, but it doesn't work with Vuetify (not sure if this should be considered their issue ore Vue's)


Passing slots through to child components is, according to what you usually find on the net, done with this syntax:

<slot v-for="(_, name) in $slots" :name="name" :slot="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>

Unfortunately this uses the slot and slot-scope attributes which are marked as deprecated.
As a current replacement, the following syntax seems to be the correct one:

<template v-for="(_, name) in $scopedSlots" v-slot:[name]="slotData">
  <slot :name="name" v-bind="slotData"/>
</template>
<template v-for="(_, name) in $slots" v-slot:[name]>
  <slot :name="name"/>
</template>

Unfortunately this does not give the same result as the old syntax. Depending on the order in which scoped and non-scoped slots are passed, either scoped slots are not passed at all or non-scoped slots are only passed in $scopedSlots, which Vuetify (and maybe other libraries?) ignores for slots that are not supposed to be scoped.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions