2.5.2
https://jsfiddle.net/daxchen/k75y6tu0/
My use case is that I have a default layout with Toolbar and main content wrapper. But some pages needs a SearchBar
and some don't, and layouts may have different levels.
So I created a component called LayoutDefault
as a base for other layouts to use. And because I want to be able to replace the default Toolbar when needed, I put the default Toolbar in <slot name="toolbar">
, with Toolbar
as fallback content.
Code snippet:
// LayoutDefault.vue
<slot name="toolbar">
<Toolbar title="title from layout-inner">
<slot name="toolbarSlot"></slot>
</Toolbar>
</slot>
I make these kind of components because I want to be able to:
"toolbarSlot"
in above example)And then in other layout components, I do this:
// LayoutLv1.vue
<div class="layout">
<LayoutDefault>
<slot name="toolbar" slot="toolbar"></slot>
<slot name="toolbarSlot" slot="toolbarSlot"></slot>
<slot>default content from Layout</slot>
</LayoutDefault>
</div>
As you can see, to pass components to grandchild's slots, I used this pattern: <slot name="foo" slot="foo">
.
For some reason, components passed using this pattern will be passed to the default slot if there's one.
See examples 2, 3, and 4 in the reproduction.
I expect when no nothing is passed to a named slot, the fallback content will be rendered, with it's slots too.
In example 2, the replaced Toolbar
is rendered in LayoutDefault
's default slot.
In example 3 and 4, SearchBar
is passed to slot="toolbarSlot"
, but not rendered.
Is this the expected behavior?
Or if there's a way for me to make these kind of reusable layouts with each default parts replaceable, and if using the default parts, be able to pass components into their (default parts) slots?
WOW that's amazing!
Cloned, built, and tested, it works!!
Evan you're the best~~~
Thank you so much!!!
btw this is already out in 2.5.3 :)
Does this also work with slot-scope in 2.5.3? :)
@faragos here's how I accomplished passing slots to a grandchild that uses slot-scope.
@alex-martinez thanks for posting your solution, it was a big help :)
Most helpful comment
btw this is already out in 2.5.3 :)