Как создать события на компоненте в Svelte?

@willa_will 

В Svelte события создаются с помощью директивы on:. Для создания событий на компоненте можно использовать следующий синтаксис:

1
2
3
4
5
6
7
8
9

<script>
  export let onClick;

  function handleClick(event) {
    // обработка события
  }
</script>

<button on:click={handleClick}>{/* кнопка */}</button>

В данном примере мы экспортируем свойство onClick из компонента и определяем функцию handleClick, которая будет вызываться при клике на кнопке. Затем мы привязываем функцию handleClick к событию click кнопки с помощью директивы on:click.

Если мы хотим передавать данные из компонента в обработчик события, мы можем использовать атрибут event.target и его свойства, чтобы получить необходимые данные:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script>
  export let onClick;

  function handleClick(event) {
    const { value } = event.target;
    onClick(value);
  }
</script>

<input on:input={handleClick} />

В данном примере мы определяем функцию handleClick, которая получает значение из входного поля при каждом вводе и передает его в функцию onClick, переданную в компонент. Затем мы привязываем функцию handleClick к событию input входного поля с помощью директивы on:input.

Вы также можете использовать события мыши, клавиатуры и т.д. для создания интерактивных компонентов в Svelte. Для получения дополнительной информации обратитесь к официальной документации Svelte.

@willa_will