从 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 is not defined错误，但我预计会定义 props，因为我已经在load()主布局上的 Fundtion 返回中定义了它（基于docs）。

我是否需要以某种方式显式声明道具而不是期望它们从函数的返回中可用load()？

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，但是您可以使用以下命令将所有 props 传递给组件$$props

此外，加载功能仅适用于页面和布局，因此您肯定必须在标题和菜单中导出道具，因为这些只是常规的精简组件。