2.5.2
https://jsfiddle.net/daxchen/k75y6tu0/
我的用例是我有一个默认布局,其中包含工具栏和主要内容包装器。 但是有些页面需要SearchBar
,有些则不需要,并且布局可能具有不同的级别。
因此,我创建了一个名为LayoutDefault
作为其他布局使用的基础。 并且因为我希望能够在需要时替换默认工具栏,所以将默认工具栏放在<slot name="toolbar">
,并以Toolbar
作为备用内容。
程式码片段:
// LayoutDefault.vue
<slot name="toolbar">
<Toolbar title="title from layout-inner">
<slot name="toolbarSlot"></slot>
</Toolbar>
</slot>
之所以制作此类组件,是因为我希望能够:
"toolbarSlot"
)然后在其他布局组件中,我这样做:
// 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>
如您所见,为了将组件传递给孙子插槽,我使用了以下模式: <slot name="foo" slot="foo">
。
由于某种原因,使用该模式传递的组件将被传递到默认插槽(如果有)。
请参见复制中的示例2、3和4。
我希望当没有任何东西传递给命名槽时,回退内容也将被渲染,其中也包含槽。
在示例2中,替换后的Toolbar
呈现在LayoutDefault
的默认插槽中。
在示例3和4中, SearchBar
传递给slot="toolbarSlot"
,但不呈现。
这是预期的行为吗?
还是如果我有一种方法可以使这些可重用的布局与每个默认零件一起更换,并且如果使用默认零件,是否能够将组件传递到其(默认零件)插槽中?
哇,太神奇了!
克隆,构建和测试,可以正常运行!
埃文你是最好的~~~
非常感谢!!!
顺便说一句,这已经在2.5.3中了:)
这是否也适用于2.5.3中的slot-scope? :)
@faragos这是我完成将插槽传递给使用slot-scope的孙子的方式。
@ alex-martinez感谢您发布解决方案,这对您有很大帮助:)
最有用的评论
顺便说一句,这已经在2.5.3中了:)