Svelte中如何从page.svelte向layout.svelte访问数据？

页面组件里的export let属于页面自身的props，不会自动传递给上层布局组件。要让布局能访问这些数据，得用SvelteKit提供的$page.data机制，具体步骤如下：

• 步骤1：在页面组件中通过load函数暴露数据
  修改/some-route/page.svelte，把需要共享的数据放到load函数的返回值里：

  // /some-route/page.svelte
  export async function load() {
    return {
      name: 'John'
    };
  }
  
  // 页面内部仍可通过export let接收该数据（可选）
  export let name;
  

• 步骤2：在布局组件中通过$page.store访问数据
  在/layout.svelte中引入page store，然后通过$page.data获取数据：

  // /layout.svelte
  <script>
    import { page } from '$app/stores';
  </script>
  
  <div>Hello, {$page.data.name}</div>
  

补充说明 #

页面组件的export let本质是接收load函数返回的数据，而布局作为包裹页面的上层组件，无法直接读取页面的props，必须通过$page这个全局store来获取页面级别的数据，这是SvelteKit的标准数据流方式。

内容的提问来源于stack exchange，提问作者Tadas V.