如何在layout.svelte中访问page.svelte的数据

Question

/some-route/page.svelte

export let name='John'

/layout.svelte

{name}  //error name is not defined

<script>
  ???
</script>

找不到任何工作示例。仅在 $page.data 中找到的文档中。

Answer 1

你不应该这样做。一个布局可以包含多个页面，不保证数据相同。如果数据用于布局，请将其移至那里。

通过上下文与布局进行通信的示例：

<!-- +layout.svelte -->
<script>
    import { writable } from 'svelte/store';
    import { setContext } from 'svelte';

    const errors = writable([]);
    setContext('errors', errors);
</script>

{#each $errors as error}
    <div class="error">{error}</div>
{/each}
<slot />

<!-- +page.svelte -->
<script>
    import { getContext } from 'svelte';

    const errors = getContext('errors');
</script>

<button on:click={() => $errors = [...$errors, 'oh no!']}>
    Add error
</button>