Отправка и прослушивание событий
Компонент может генерировать пользовательские события непосредственно в выражениях шаблона (например, в обработчике v-on), используя встроенный $emit метод
Затем родитель может прослушать его, используя v-on
Модификатор .once также поддерживается в прослушивателях событий компонентов
Подобно компонентам и свойствам, имена событий обеспечивают автоматическое преобразование регистра. Обратите внимание, что мы создали событие CamelCase, но можем прослушивать его, используя прослушиватель в стиле кебаба в родительском элементе. Мы рекомендуем использовать в шаблонах прослушиватели событий в стиле кебаба (kebab-case)
Важно
В отличие от собственных событий DOM, события, создаваемые компонентом, не всплывают. Вы можете только прослушивать события, создаваемые прямым дочерним компонентом. Если есть необходимость в обмене данными между одноуровневыми или глубоко вложенными компонентами, используйте внешнюю шину событий или решение для глобального управления состоянием (глобальное состояние и state менеджеры рассмотрим в следующих уроках)
Аргументы событий
Иногда полезно передать определенное значение вместе с событием. Например, мы можем захотеть, чтобы BlogPostкомпонент отвечал за то, насколько увеличить текст. В этих случаях мы можем передать дополнительные аргументы, чтобы $emit предоставить это значение
Затем, когда мы прослушиваем событие в родительском элементе, мы можем использовать встроенную стрелочную функцию в качестве прослушивателя, которая позволяет нам получить доступ к аргументу события
Или, если обработчик событий является методом
Затем значение будет передано в качестве первого параметра этого метода
Обратите внимание
Все дополнительные аргументы, переданные $emit() после имени события, будут перенаправлены прослушивателю. Например, $emit('foo', 1, 2, 3) функция прослушивателя получит три аргумента.
Объявление излучаемых событий
Компонент может явно объявлять события, которые он будет генерировать, с помощью defineEmits() макроса
Метод $emit, который мы использовали в разделе компонента, templateнедоступен , но возвращает эквивалентную функцию, которую мы можем использовать вместо этого: script setup defineEmits()
Макрос нельзя использовать внутри функции, его необходимо поместить непосредственно внутри defineEmits(), как в примере выше.script setup
Если вы используете явную setupфункцию вместо script setup, события должны быть объявлены с использованием этой emits опции, а emit функция отображается в setup() контексте
Как и другие свойства контекста setup(), emit его можно безопасно деструктурировать
Опция emits и defineEmits() макрос также поддерживают синтаксис объекта. При использовании TypeScript вы можете вводить аргументы, что позволяет нам выполнять проверку полезной нагрузки создаваемых событий во время выполнения
Если вы используете TypeScript с script setup, также можно объявлять создаваемые события, используя аннотации чистого типа
Хотя это и необязательно, рекомендуется определить все создаваемые события, чтобы лучше документировать, как должен работать компонент. Это также позволяет Vue избегать крайних случаев, вызванных событиями DOM, вручную отправляемыми сторонним кодом.
Важно
click Если в этом параметре определено собственное событие (например, ) emits, прослушиватель теперь будет прослушивать только click события, создаваемые компонентом, и больше не будет реагировать на собственные click события.
Проверка событий
Подобно проверке типа свойства, создаваемое событие может быть проверено, если оно определено с использованием синтаксиса объекта, а не синтаксиса массива.
Чтобы добавить проверку, событию назначается функция, которая получает аргументы, переданные в вызов, и возвращает логическое значение, указывающее, действительно ли событие или нет. emit