Vue: 将组件传递给孙辈的嵌套命名插槽将在默认插槽中解析。

创建于 2017-11-03  ·  5评论  ·  资料来源: vuejs/vue

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>

之所以制作此类组件,是因为我希望能够:

  1. 如果需要,请替换默认的工具栏。
  2. 使用默认的工具栏,但将内容传递到其插槽(上例中"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中了:)

所有5条评论

哇,太神奇了!
克隆,构建和测试,可以正常运行
埃文你是最好的~~~
非常感谢!!!

顺便说一句,这已经在2.5.3中了:)

这是否也适用于2.5.3中的slot-scope? :)

@faragos这是我完成将插槽传递给使用slot-scope的孙子的方式。

https://jsfiddle.net/alexm/5hx43mb2/

@ alex-martinez感谢您发布解决方案,这对您有很大帮助:)

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

aviggngyv picture aviggngyv  ·  3评论

robertleeplummerjr picture robertleeplummerjr  ·  3评论

loki0609 picture loki0609  ·  3评论

franciscolourenco picture franciscolourenco  ·  3评论

guan6 picture guan6  ·  3评论