代码之家 › 专栏 › 技术社区 › Clifton Labrum

SvelteKit:如何使用基于路由的命名插槽

sveltekit svelte

Clifton Labrum · 技术社区 · 4 年前

我是SvelteKit的新手,无法解决与插槽相关的问题。我正在尝试制作一个应用程序布局,它有一个主窗格和一个详细窗格,其中主窗格和详细窗格的内容是根据路线确定的。

假设我有一个 __layout.svelte 文件如下:

//-------------------------
// routes/__layout.svelte
//-------------------------
<main>
  <slot name="master" />
  <slot name="detail" />
</main>

然后我有另一个类似的页面(还有几个类似的路线页面):

//-------------------------
// routes/users.svelte
//-------------------------

<div slot="master">
  Users master content...
</div>

<div slot="detail">
  Users detail content...
</div>

当我导航到 http://localhost:3000/users 我只是收到一个错误,说我不能使用 slot="" 在里面 users.svelte 因为它不在子组件内部。

我做错了吗?你将如何在SvelteKit中实现类似的应用程序布局?

0 回复 | 直到 4 年前

Bob Fanger 4 年前

您已接近目标,但不能在__layout.svelte中使用命名插槽

__layout组件只接收一个(默认)插槽。该插槽包含匹配路由的组件。

一个解决方案是将__layout重命名为一个独立的组件,并在route.svelte中使用它:

//-------------------------
// lib/MasterDetail.svelte
//-------------------------
<main>
  <slot name="master" />
  <slot name="detail" />
</main>

//-------------------------
// routes/users.svelte
//-------------------------
<script>
import MasterDetail from "$lib/MasterDetail.svelte"
</script>

<MasterDetail>
  <div slot="master">
    Users master content...
  </div>

  <div slot="detail">
    Users detail content...
  </div>
</MasterDetail>

另一种解决方案可能是限制route.svelte只渲染细节部分,并让__layout渲染主部分。
也许调查一下 nested layouts 以及 page store 以检测哪个细节是活动的。

推荐文章

Alex · 在轻量级中同时解构和不解构变量

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

opensas · SvelteKit:使用vitest时出现错误invite.config.js:“没有重载匹配此调用”

1 年前

Leonardo Cavalcante · Svelte 5:当对图像使用条件渲染时,表单在页面加载时短暂出现然后消失

1 年前

Localghost · 我如何在sveltekit的开发和发布版本中拥有单独的功能?

1 年前

Michael · 单击单选按钮后,保存按钮不会立即更新

1 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

1 年前

Michael · 将可读存储添加到可写存储

1 年前

Sam Sabin · 是否可以将Svelte{#each}循环的结果限制一定的量?

1 年前

SuperSIlly2 · Svelte/TS通过foreach循环应用样式不会修改样式

1 年前