我正在探索标准的 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');
}
我阅读了有关仅在客户端上执行代码的信息,尽管我不喜欢所有样板文件,但我尝试这样做,并且显然插槽没有传递给子组件,因此据我了解是行不通的。
对于如何为这项任务得出正确的语法和结构的任何建议,我将不胜感激。