主页 / coding / 问题 / 79136966
Accepted
Lux HK
Asked: 2024-10-29 19:13:17 +0800 CST

Svelte 5 +layout.svelte 中有多个命名插槽

  • 772

我已经教授了有关组件的多个 props 的教程，但我想在 中使用它+layout。

我希望可以在不同的路由子级（一些文件）中{@render}上层布局指定的（+layout.svelte，不是一个组件）插入多个不同的组件，+page.svelte就像svelte4的多名插槽一样。

我目前使用下面的代码来解决需求，但直觉认为我的方法不好，很迂回，而且我不需要在页面加载后动态改变插入的组件。现在我使用额外的代码通过上下文方法传递这些代码片段，有没有更好的方法来简化它们？

<!-- +layout.svelte -->
<script lang="ts">
  import { setContext, createRawSnippet } from 'svelte';
  import { writable } from 'svelte/store';

  const dummySnippet = (text: string) =>
    createRawSnippet(() => {
      return { render: () => text };
    });

  let { children } = $props();

  let slotLeft = writable(dummySnippet('LEFT'));
  let slotCenter = writable(dummySnippet('CENTER'));
  let slotRight = writable(dummySnippet('RIGHT'));

  setContext('LayoutSlot', { slotLeft, slotCenter, slotRight });
</script>

<winbox class="flex flex-row h-full w-full overflow-hidden">
  <listbox class="w-[400px]">
    {@render $slotLeft()}
  </listbox>

  <div class="flex-1 flex flex-col border-x">
    {@render $slotCenter()}
  </div>

  <div class="w-[350px]">
    {@render $slotRight()}
  </div>
</winbox>

{@render children()}

<!-- +page.svelte -->
<script lang="ts">
  import { onMount, getContext, type Snippet } from 'svelte';
  import type { Writable } from 'svelte/store';

  let {
    slotLeft,
    slotCenter,
    slotRight
  }: {
    slotLeft: Writable<Snippet>;
    slotCenter: Writable<Snippet>;
    slotRight: Writable<Snippet>;
  } = getContext('LayoutSlot');

  onMount(() => {
    $slotLeft = menuLeft;
    $slotCenter = mainContent;
    $slotRight = menuRight;
  });
</script>

{#snippet menuLeft()}
  <p>Left Menu Pending</p>
{/snippet}

{#snippet mainContent()}
  <p>Center Content Pending</p>
{/snippet}

{#snippet menuRight()}
  <p>Right Menu Pending</p>
{/snippet}

<children>TEST</children>

<!-- .... other option snippets from other routing-->
<!-- {#snippet foo1()} -->
<!-- {#snippet foo2()} -->

希望有人能给我提供比我当前的方法来简化代码更好的想法，也许应该有一种直接的方法children在+page.svelte内部 html 区域传递道具（而不仅仅是默认道具），但我找不到它。

sveltekit

2 个回答

  1. Best Answer

    这实际上并没有得到支持。

    在 Svelte 5 之前，你根本无法做到这一点，而且这相当不靠谱。它无法与服务器端渲染正常工作，因为布局渲染在页面将内容发送回来之前就完成了。

    有一种方法可以解决这个问题，即首先运行页面，不渲染其中的任何内容，然后从上下文中渲染插槽。（由zyxd在 GitHub 上找到。）

    例如

    <!-- +layout.svelte -->
<script>
  import { setContext } from 'svelte';

  const { children } = $props();

  const slots = {};
  setContext('layout-slots', slots);
</script>

<!--
  Run page logic first, this should not output anything
  and only set slots in the context.
-->
{@render children()}

<div class="box">
  <div class="left">
    {@render slots.left()}
  </div>
  <div class="right">
    {@render slots.right()}
  </div>
</div>

{@render slots.children()}

    <!-- +page.svelte -->
<script>
  import { getContext } from 'svelte';

  // This block could be extracted to a function taking the slots
  // as arguments for convenience.
  const slots = getContext('layout-slots');
  slots.left = left;
  slots.right = right;
  slots.children = children;
</script>

{#snippet left()}
  <div>Left slot</div>
{/snippet}

{#snippet right()}
  <div>Right slot</div>
{/snippet}

{#snippet children()}
  <div>Children slot</div>
{/snippet}

    或者，创建一个具有必要插槽的组件并在每个页面中使用它，而不是通过 执行此操作+layout.svelte。

    • 1

  2. 很高兴得到 brunnerh 的建议，现在可以更合理地组织代码了，只需要用 {@render} 制作一个包含布局 div 的 WinBox 组件，并引入预定义的 snippet 属性，在 +page.svelte 上将 {snippet} 传入 WinBox 组件即可。也许我需要更进一步，将 snippet 替换为 component，然后以很少的改动将其传入 WinBox。

    我猜我更接近 svelte5。以下代码就是我正在做的事情。

    // WinBox.svelte

<script lang="ts">
    import type { Snippet } from 'svelte';

    let {
        children,
        slotLeft = dummySnippet,
        slotCenter = dummySnippet,
        slotRight = dummySnippet
    }: {
        children?: Snippet;
        slotLeft?: Snippet;
        slotCenter?: Snippet;
        slotRight?: Snippet;
    } = $props();
</script>

{#snippet dummySnippet()}
    <p>Pending</p>
{/snippet}

<winbox class="flex flex-row h-full w-full overflow-hidden">
    <listbox class="w-[400px]">
        {@render slotLeft()}
    </listbox>

    <div class="flex-1 flex flex-col border-x">
        {@render slotCenter()}
    </div>

    <div class="w-[350px]">
        {@render slotRight()}
    </div>
</winbox>

{@render children?.()}

    // +page.svelte

<script lang="ts">
    import { WinBox } from '$lib/components/my-ui/win-box';
</script>

{#snippet slotLeft()}
    <p>Left Menu Pending</p>
{/snippet}

{#snippet slotCenter()}
    <p>Center Content Pending</p>
{/snippet}

{#snippet slotRight()}
    <p>Right Menu Pending</p>
{/snippet}

<WinBox {slotLeft} {slotCenter} {slotRight}>This area is the children prop snippet</WinBox>
    • 0

相关问题