时间戳

首页 > 解决方案 > 从 SvelteKit load() 函数导出道具

javascript - 从 SvelteKit load() 函数导出道具

问题描述

我正在尝试在 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()主要布局的基金返回中定义了它（基于docs）。

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

标签： javascriptsveltesvelte-componentsveltekit

解决方案

从模块props脚本传递到常规组件脚本，这意味着您仍然需要添加布局。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 中导出 props，因为它们只是常规的 svelte 组件。

推荐阅读