如何为Sapper组件的插槽绑定客户端事件处理器？

你遇到的核心问题主要有两个：服务端渲染时因window不存在引发的报错，以及插槽传递函数时的语法与序列化问题。咱们一步步来修复：

1. 让登录逻辑仅在客户端执行 #

Sapper是服务端渲染框架，服务器环境没有window对象，且会执行组件内的所有顶层代码，直接在<script>里写依赖window的逻辑必然报错。我们可以用Svelte的onMount钩子（仅在客户端组件挂载后执行），或者Sapper提供的browser环境变量来做环境判断：

修正后的Login.svelte #

<script>
  import { onMount } from 'svelte';
  // 也可以用Sapper官方环境变量：import { browser } from '$app/env';

  let loginHandler;

  onMount(() => {
    // 这段逻辑只会在客户端运行
    loginHandler = () => {
      window.alert('ALERT'); // 这里替换成你的Auth0登录逻辑
    };
  });

  // 另一种用browser判断的写法：
  // if (browser) {
  //   loginHandler = () => {
  //     window.alert('ALERT');
  //   };
  // }
</script>

<!-- 插槽传递props的标准写法：将函数作为slot prop传递 -->
<slot {loginHandler} />

2. 修正Nav.svelte的插槽接收逻辑 #

之前的写法在插槽函数传递和接收上有问题，而且服务器端渲染时可能会出现空函数的情况，我们调整为更规范的写法：

修正后的Nav.svelte #

<script>
  import Login from './Login.svelte';
</script>

<li>
  <Login let:loginHandler>
    <!-- 只有当客户端生成了loginHandler后才渲染按钮，避免服务端渲染空内容 -->
    {#if loginHandler}
      <button on:click={loginHandler}>登录</button>
    {/if}
  </Login>
</li>

为什么这样能解决问题？ #

• 服务端报错问题：onMount钩子仅在客户端组件挂载后执行，服务器端不会运行这段代码，自然不会碰到window未定义的错误；用browser变量判断也是同理，服务器端browser为false，不会执行依赖window的逻辑。
• 语法错误问题：之前直接在组件顶层定义函数并通过插槽传递，服务器端会尝试序列化这个函数，但函数无法被序列化为合法的JavaScript代码（这就是你看到Unexpected token (错误的根源）。把函数放在onMount里，服务器端不会生成这个函数，客户端挂载后才赋值，插槽传递的是客户端专属的函数，就不会有序列化问题。
• 插槽传递逻辑：Svelte的插槽props传递用<slot {propName} />的简写方式更清晰，父组件用let:propName接收，能确保函数正确绑定到按钮的点击事件上。

如果你的Sapper版本较新（或已升级为SvelteKit），$app/env的browser变量是更推荐的客户端环境判断方式，比onMount更直接。

内容的提问来源于stack exchange，提问作者Alex Bausk