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

Question

您好，我正在使用 _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 生命周期挂钩手动将 "component to display" 设置到插槽中，但这感觉不对，因为路由不包含要显示的组件

<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

Answer 1

根据 Svelte 文档 "a slot can contain anything"

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

我想这个 post 的要点是：即使插槽可以包含任何内容，但这并不意味着它应该包含任何内容。

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

Can I use a slotted component to display other components in svelte?

svelte