Question

我正在研究标准的svelte-sapper模板，我想在Nav组件中添加一个按钮，该按钮将执行一些登录逻辑。我也想分开按钮的显示和逻辑，所以我尝试为此使用插槽。在Nav.svelte中：

<script>
    import Login from './Login.svelte';
    ...
</script>
...
        <li>
            <Login let:onclick={onclick}>
                <button onClick={onclick}>
                    Click me!
                </button>
            </Login>
        </li>

在Login.svelte中：

<script>
    let onclick;
    onclick = function() {
        window.alert('ALERT');
        // Browser-specific Auth0 logic goes here
    };
</script>

<div>
    <slot onclick={onclick}></slot>
</div>

我显然不知道我在做什么，因为代码在水合作用之前在服务器端执行（由服务器路由执行中短暂显示的500错误证明），然后当我单击按钮时（在浏览器控制台中））：

function() {
--------^ Uncaught SyntaxError: Unexpected token (
        window.alert('ALERT');
    }

我读到了making code execute on client only的内容，尽管我不喜欢所有的样板，但我还是尝试这样做，显然插槽没有传递给子组件，以至于我的理解不起作用。

对于为该任务获取正确的语法和结构的任何建议，我将不胜感激。

如何将客户端事件处理程序附加到Sapper组件中的插槽？

0 个答案: