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