Support passing down slots with v-bind like in 2.x

[sqal]

What problem does this feature solve?

vuejs/vue#7178

It seems like this still needs to be implemented, in v3 because currently it passes slots as component's prop instead of its children.

https://vue-next-template-explorer.netlify.com/#%7B%22src%22%3A%22%3Cchild%20v-bind%3D%5C%22%7B%20slots%3A%20%24slots%20%7D%5C%22%3E%3C%2Fchild%3E%22%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22hoistStatic%22%3Atrue%2C%22cacheHandlers%22%3Atrue%2C%22scopeId%22%3Anull%7D%7D

What does the proposed API look like?

<child v-bind="{ slots: $slots }"></child>

[ThaDaVos]

@sqal - don't forget, VueJs 3 is still Alpha, it's far from finished and as far as I know, only contains what's needed to get it up to par with VueJs 3 (as it is a rewrite) - I'm also hoping for the implementation for this but I think we just have to wait for VueJs 3 to be finished

[sqal]

I fully understand that :) I was just playing with the alpha today and noticed that this feature is not implemented so I thought I'd open a new issue and maybe someone with free time who would like to contribute to vue 3 can add this feature.

[ysj16]

Is this feature in progress? If not, I can try. @yyx990803

[yyx990803]

@ysj16 I'm not yet fully convinced that this is the best syntax to go with. I think a proper RFC with more discussion around the use case would be needed.

[jaskang]

Is this feature in progress? If not, I can try. @yyx990803
@ysj16 If you have no time, I'll do it for you. hahah

[chjtx]

@jaskang Come on!!

[KaelWD]

How about v-slots="$slots" like jsx?
Full passthrough would just be <SomeComponent v-bind="$attrs" v-slots="$slots" />

<SomeComponent v-slots="slots">
  <template #foo>
    ...

equivalent to jsx

<SomeComponent>
  {{
    ...slots,
    foo: () => ...
  }}
</SomeComponent>

[IlCallo]

This last one seems more "correct" than the initially proposed one

[craigrileyuk]

I think the JSX-style syntax mentioned at #575 (comment) would be ideal.

I regularly find myself having to do

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

to pass through slots to another component (especially when wrapping library components).

[camiloforero]

@craigrileyuk solution works excellently for all cases I could think of

I created a playground example showcasing it, everything works exactly as I would expect it to.

About this feature, my first preferred way would be to treat slots as fallthrough attributes, just like props and events. In that case, a very simple...

<template>
  <WrappedComponent />
</template>

...would just work. That would be glorious. If that is not possible, then...

<template>
  <WrappedComponent  v-slots="$slots"/>
</template>

... or something like it, as @KaelWD suggested could be an option