在SvelteKit中如何通过__layout.svelte向slot传递props

注：__layout.svelte 是SvelteKit v1之前的命名规范，v1及以上版本统一使用+layout.svelte，以下实现逻辑两个版本完全通用。

方法1：插槽Props（最直接，推荐给页面组件传值时使用） #

直接给layout的slot绑定要传递的变量，子页面直接声明接收即可，无需额外引入依赖。

• __layout.svelte 代码示例：

<script>
  // 定义要传递的变量，可动态修改
  let btnclicked = "HR";
</script>

<!-- 给slot绑定prop -->
<slot {btnclicked} />

• slot渲染的页面组件（例如路由下的页面文件）接收代码：

<script>
  // 直接声明和layout传递的prop同名的变量即可接收
  export let btnclicked;
</script>

<!-- 直接在模板中使用 -->
<p>接收到的变量值：{btnclicked}</p>

方法2：Context API（适合跨层级传值，无需逐层透传） #

如果需要在页面内嵌套的深层子组件中拿到该变量，用插槽prop需要逐层传递太麻烦，可以用Svelte原生的Context API实现跨层级取值。

• __layout.svelte 代码示例：

<script>
  import { setContext, writable } from 'svelte';
  // 定义唯一的存取key，避免和其他上下文冲突，建议单独抽成常量文件统一维护
  const LAYOUT_SHARED_KEY = Symbol('layout_state');

  // 如果需要变量是响应式的，动态修改后所有引用组件自动更新，就用writable包一层
  let btnclicked = writable("HR");
  setContext(LAYOUT_SHARED_KEY, { btnclicked });
</script>

<slot />

• 任意层级组件取值代码：

<script>
  import { getContext } from 'svelte';
  // 和layout中定义的key保持一致
  const LAYOUT_SHARED_KEY = Symbol('layout_state');
  const { btnclicked } = getContext(LAYOUT_SHARED_KEY);
</script>

<!-- 响应式变量用$前缀订阅即可 -->
<p>深层组件拿到的变量值：{$btnclicked}</p>

方法3：全局Store（适合全应用共享的状态） #

如果该变量需要在应用的多个地方（不限于当前layout下）使用，可以抽成全局共享的Svelte Store。

• 新建状态文件src/stores/layout.js：

import { writable } from 'svelte/store';
export const btnclicked = writable('HR');

• __layout.svelte 中可以直接修改该状态：

<script>
  import { btnclicked } from '$stores/layout';

  // 示例：点击按钮修改值，所有引用该store的组件都会自动更新
  function changeVal() {
    btnclicked.set('Finance')
  }
</script>

<button on:click={changeVal}>切换值</button>
<slot />

• 任意组件取值代码：

<script>
  import { btnclicked } from '$stores/layout';
</script>

<p>全局拿到的变量值：{$btnclicked}</p>

内容的提问来源于stack exchange，提问作者ajay dalwani