Svelte – это популярный фреймворк JavaScript для создания веб-приложений. Он предлагает чистый и эффективный способ обработки событий с помощью функции «пересылки событий». В этой статье мы углубимся в концепцию пересылки событий в Svelte и рассмотрим различные методы их эффективного использования, а также примеры кода.

Что такое форвардные события?

События пересылки в Svelte позволяют передавать события от дочерних компонентов к их родительским компонентам. Это позволяет дочерним компонентам генерировать события, которые родительские компоненты могут прослушивать и обрабатывать соответствующим образом. Этот шаблон облегчает взаимодействие и координацию между компонентами.

Метод 1: использование директивы on:event

Один из способов пересылки событий в Svelte — использование директивы on:event. Давайте рассмотрим простой пример, когда дочерний компонент генерирует событие, которое должен обработать родительский компонент.

ChildComponent.svelte:

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function handleClick() {
    dispatch('customEvent', { message: 'Hello from child component' });
  }
</script>
<button on:click={handleClick}>Click Me</button>

ParentComponent.svelte:

<script>
  function handleEvent(event) {
    console.log(event.detail.message);
  }
</script>
<ChildComponent on:customEvent={handleEvent} />

Метод 2: пересылка событий через реквизит

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

ParentComponent.svelte:

<script>
  function handleEvent(message) {
    console.log(message);
  }
</script>
<ChildComponent onCustomEvent={handleEvent} />

ChildComponent.svelte:

<script>
  export let onCustomEvent;

  function handleClick() {
    onCustomEvent('Hello from child component');
  }
</script>
<button on:click={handleClick}>Click Me</button>

Метод 3. Использование магазинов

Магазины Svelte предоставляют мощный механизм управления состоянием. Используя хранилища, мы можем пересылать события между компонентами. Давайте посмотрим, как это можно сделать:

// eventStore.js
import { writable } from 'svelte/store';
export const eventStore = writable(null);

ChildComponent.svelte:

<script>
  import { eventStore } from './eventStore';
  function handleClick() {
    eventStore.set('Hello from child component');
  }
</script>
<button on:click={handleClick}>Click Me</button>

ParentComponent.svelte:

<script>
  import { eventStore } from './eventStore';
  let message = '';
  $eventStore.subscribe((value) => {
    message = value;
  });
</script>
<h1>{message}</h1>
<ChildComponent />

В этой статье мы рассмотрели различные методы пересылки событий в Svelte. Мы рассмотрели использование директивы on:event, пересылку событий через реквизиты и использование хранилищ Svelte. Используя эти методы, вы можете улучшить взаимодействие и координацию между вашими компонентами Svelte, что приведет к созданию более надежных и интерактивных веб-приложений.

Не забудьте поэкспериментировать с этими методами и выбрать тот, который лучше всего подходит для вашего конкретного случая использования. Приятного программирования вместе со Svelte!