从SvelteKit的load()函数导出属性

Question

我将尝试为SvelteKit创建一个动态更新的导航栏，当前打开的部分会相应地进行格式化。我正在尝试根据路径的第一部分来识别页面，如下所示：

__layout.svelte:

<script context="module">
    export const load = ({ page }) => {
        return {
            props: {
                currentSection: `${page.path}`.split('/')[0],
                sections: ['home', 'dashboard', 'settings']
            }
        };
    }
</script>

<div class="min-h-screen bg-gray-100">
    <Header {...props} />
    <slot />
</div>

Header.svelte

<script>
    import Menu from "$lib/nav/menu.svelte"
</script>

<Menu {...props}></Menu>

Menu.svelte

<script>
    export let sections;
    export let currentSection;
</script>

{#each sections as { section }}
    <a
        href="/{section}"
        class="{section == currentSection
            ? 'bg-gray-900 text-white'
            : 'text-gray-300 hover:bg-gray-700'} other-classes"
        >{section}</a
    >
{/each}

这导致出现了一个“props未定义”的错误，但我本来期望props已经在主布局的load()函数的返回值中定义好了（基于文档）。我是否需要明确声明这些props，而不是期望它们可以从load()函数的返回值中获得？

- Harry

Answer 1

props 是从模块脚本传递到常规组件脚本中的，这意味着您仍然需要在布局中添加 export let props。

<script context="module">
  export const load = () => {
    return {
      props: {
        test: 123
      }
    }
  }
</script>

<script>
  export let test; //
</script>

请注意，这将总是展开 props，您不能做到 export let props 并检索 所有的属性，但是您可以使用 $$props 获取传递给组件的所有属性。

此外，load 函数仅适用于页面和布局，因此您肯定需要在 Header 和 Menu 中导出 props，因为它们只是常规的 svelte 组件。

- Stephane Vanraes

---

“props未定义”错误在__layout.svelte中，因此props从未传递到组件 - 即使load函数返回它们，布局中是否也需要显式声明props？这就是问题的基础。 - Harry

是的，它仍然需要这样做，__layout 是一个（几乎）像其他任何组件一样的组件。 - Stephane Vanraes

也许您可以更新您的答案以展示如何完成这个操作？ - Harry