Передача событий с on:click
Повторно отправляйте события компонента родителю с помощью непараметризованной директивы on:
«Передача событий с on:click» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Проброс событий
Чтобы повторно отправить событие дочернего элемента вверх через свой компонент, укажите on:event без обработчика.
Основы проброса
Так щелчок внутренней кнопки передаётся пользователю компонента MyButton.
<button on:click>Click</button>Прослушивание в родительском компоненте
Родительский компонент прослушивает события компонента так же, как события элемента DOM.
<MyButton on:click={handle} />Проброс нескольких событий
Можно пробрасывать любое количество нативных событий.
<input on:input on:focus on:blur />Преимущество компонентов-обёрток
Этот подход необходим для создания компонентов-обёрток, например кнопок, полей ввода и ссылок.
Сочетание с пользовательскими событиями
Свободно сочетайте проброшенные события DOM с собственными событиями, созданными через createEventDispatcher.
Сохранение объекта события
Проброшенные события поступают родителю с исходным объектом события DOM без изменений.
Модификаторы не нужны
Если вы хотите, чтобы родительский компонент управлял модификаторами, не указывайте их в дочернем компоненте.
Отличие от пользовательских событий
Проброс повторно отправляет реальные события DOM, а пользовательская отправка создаёт новые события.
Совместимость с TypeScript
Проброшенные события сохраняют точные типы, если родительский компонент объявляет их в TypeScript.
На практике
Большинство компонентов дизайн-систем используют проброс, чтобы оставаться гибкими и не перечислять каждое свойство.
Быстрая проверка
Что делает on:click без обработчика?
Итоги
Директивы on:event без обработчика пробрасывают события DOM родителю вашего компонента, обеспечивая чистый интерфейс обёртки.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Передача событий с on:click» бесплатный?
Да — полный текст урока «Передача событий с on:click» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Передача событий с on:click»?
Повторно отправляйте события компонента родителю с помощью непараметризованной директивы on: Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Передача событий с on:click»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- on:click on:input on:submit
- Модификаторы событий: preventDefault stopPropagation once
- Пользовательские события с createEventDispatcher
- Передача событий с on:click