从 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() 基金会的 return 中定义了它布局（基于 docs）。

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

Answer 1

props是从module脚本传递给常规组件script，这意味着你还需要添加export let props 也在您的布局中。

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

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

请注意，这将始终展开道具，您不能执行 export let props 并检索 所有道具 ，但是您可以获得传递给组件的所有道具使用 $$props

此外，加载功能仅适用于页面和布局，因此您肯定需要在 Header 和 Menu 中导出道具，因为它们只是常规的 svelte 组件。

从 SvelteKit load() 函数导出道具

Exporting props from SvelteKit load() function

javascript

svelte

svelte-component

sveltekit