Question

我正在构建一个小型库，该库允许从其他组件内部修改应用程序布局的某些部分。

基本思想是拥有一个主要的导航组件：

<template>
  <div class='main-navigation>
    <div class='logo'><img...>
    <div class='actions'>
      <Container name='extra-actions' />
      <a href="some-action">Action</a>
    </div>
</template>

组件然后可以使用以下命令注册其他内容：

<template>
  <div class='home-page'>
    <ContentFor container="extra-actions">
      <a href='some-home-specific-action'>Do sth extra</a>
    </ContentFor>

    ...rest of the page
  </div>
</template>

我已经成功地通过使用自定义插件和服务对象将其注册（和更新）为ContentFor中定义的VNode并将其呈现在容器中的方法来使上述方法起作用。我现在想通过允许用户为给定的内容添加自定义布局来增强它，例如：

<ul class='actions'>
  <Container name='extra-actions'>
    <li><slot></slot></li>
  </Container>
</ul>

这将很好地将视图组件与导航结构分离。我尝试了以下方法：

render (h) {
  return h(Fragment, Object.values(this.contents).map((content) => {
    if (this.$scopedSlots.default) {
      return this.$scopedSlots.default({
        slots: { default: content.slot } # this does nothing!
      })
    } else {
      # This works as expected
      return content.slot
    }
  }))
},

当没有自定义模板时，上面的方法就可以正常工作。存在自定义模板时，它将呈现该模板，但不会将内容传递到模板的插槽，从而导致：

<ul class='actions'>
  <li></li> # instead of <li><a href='some-home-specific-action'>Do sth extra</a></li>
</ul>

是否可以将范围传递给其他范围？

Answer 1

因此，在反复研究之后，我了解到这不可能解决我使用插槽的模板问题。当我这样做

# layout/Navigation.vue
<ul>
  <Container name='main-nav-actions>
    <li><slot/></li>
  </Container>
</ul>

</slot>在“导航”组件的上下文中正在解决-这意味着它是VNode的静态数组。因此，插槽不能具有自己的动态嵌套插槽。

相反，我不得不编写一个负责渲染VNode的功能组件：

export {
  name: 'RenderContent',
  functional: true,
  render (h, { props }) { return props.content }
}

暴露了这些之后，我现在可以使用scopedSlot构建模板：

  <Container name='main-nav-actions vue-slot="{ content }">
    <li><RenderContent :content="content"></li>
  </Container>

这不是最漂亮的解决方案，但它似乎可以正常工作，它允许通过ContentFor传递可选选项，这是相当不错的。

将插槽传递到插槽

1 个答案: