Как подключить обработчик событий на стороне клиента к слоту в компоненте Sapper? - PullRequest
Новая
       70

Как подключить обработчик событий на стороне клиента к слоту в компоненте Sapper?

0 голосов
/ 09 июня 2019

Я изучаю стандартный шаблон 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');
    }

Я читал о , заставляющем код выполняться только на клиенте и насколько мне не нравятся все шаблоны, я пытался это сделать, и, по-видимому, слоты не передаются дочерним компонентам, так что, по моему мнению, не работает.

Буду признателен за любой совето том, как получить правильный синтаксис и структуру для этой задачи.

...