Пользовательские события с createEventDispatcher
Создавайте типизированные пользовательские события в дочерних компонентах для обработки родителем
«Пользовательские события с createEventDispatcher» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужны пользовательские события
Дочерние компоненты передают информацию родителю, отправляя пользовательские события, которые тот прослушивает.
Импорт диспетчера
Импортируйте createEventDispatcher из svelte и создайте диспетчер внутри скрипта.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Отправка события
Вызовите dispatch(name, detail), чтобы отправить событие. Родительские компоненты прослушивают его с помощью on:name.
function save() { dispatch("save", { id: 42 }); }Прослушивание в родителе
Обращайтесь с пользовательскими событиями так же, как с событиями DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Данные события
Второй аргумент становится значением event.detail на стороне получателя.
По умолчанию события не всплывают
Пользовательские события автоматически не всплывают через деревья компонентов Svelte. При необходимости явно передавайте их дальше.
Типизированные события
С помощью TypeScript можно типизировать события, чтобы родительские компоненты получали подсказки автодополнения.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Отменяемые события
Передайте { cancelable: true } третьим аргументом, чтобы разрешить родительским компонентам вызывать preventDefault.
Несколько событий
Один диспетчер может отправлять события разных типов; используйте уникальные имена для разных действий.
Избегайте общих имён
Предпочитайте конкретные имена, например itemSelected, вместо общего change.
Событие или обратный вызов
События хорошо подходят для передачи сигналов вверх; при тесной интеграции рассмотрите передачу свойств с функциями обратного вызова.
Быстрая проверка
Как родительский компонент получает данные события?
Итоги
Используйте createEventDispatcher, чтобы отправлять именованные события с данными в detail, а прослушивайте их с помощью on:eventName.
Часто задаваемые вопросы
Урок «Пользовательские события с createEventDispatcher» бесплатный?
Да — полный текст урока «Пользовательские события с createEventDispatcher» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Пользовательские события с createEventDispatcher»?
Создавайте типизированные пользовательские события в дочерних компонентах для обработки родителем Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Пользовательские события с createEventDispatcher»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- on:click on:input on:submit
- Модификаторы событий: preventDefault stopPropagation once
- Пользовательские события с createEventDispatcher
- Передача событий с on:click