我可以使用开槽组件在 svelte 中显示其他组件吗？答案

【问题标题】：Can I use a slotted component to display other components in svelte?我可以使用开槽组件在 svelte 中显示其他组件吗？
【发布时间】：2018-12-19 12:20:42
【问题描述】：

您好，我正在使用 _layout 将我的应用分成这样的部分

_layout.html

    <div class="container"> <-- creates a 12 column grid
      {#if $user} 
        <Header /> <-- spans the first row of the 12 columns
        <Menu segment={child.segment}/> <-- spans the first 2 columns of the remaining rows
        <Content slot={child.component}/> <-- spans the other 10 columns
      {:else}
        <Login /> 
      {/if}
    </div>

这就是我想要实现的目标

目前我使用内容组件中的 svelte 生命周期挂钩手动将“要显示的组件”设置到插槽中，但这感觉不对，因为路由不包含要显示的组件

<content>
  <slot>
    {#if dashboard}
      <Dashboard />
    {:elseif users}
      <Users />
    {/if}
  </slot>
</content>

<script>
  var dashboard, users = false;

   export default {
     oncreate() {
       this.dashboard = true;
     },
     ...

感觉我应该通过路由'/'和'/users'包含组件，并且内容组件应该只显示child.component

【问题讨论】：

如果垂直菜单与右侧内容相关，我将在每条路线内对其进行管理。您可以查看此工作进行中：github.com/appshore/SvelteSapperGraphQL/blob/master/src/routes/…
没有菜单是静态的，但我已经意识到这个问题是无关紧要的，我不知道为什么

标签： svelte

【解决方案1】：

根据 Svelte 文档“插槽可以包含任何东西”

在我的示例中，根本不需要插槽，我只需要包含组件并控制每个都显示有一个变量。

我想这篇文章的要点是：即使一个插槽可以包含任何东西，但这并不意味着它应该包含。

【讨论】：