主页 / user-28040664

Lux HK's questions

Martin Hope
Lux HK
Asked: 2024-10-29 19:13:17 +0800 CST
  • 6

我已经教授了有关组件的多个 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