Узнайте, как модель, управляемая событиями, может помочь вам передавать данные между компонентами.

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

Генерация пользовательских событий — это один из способов взаимодействия между компонентами; реквизит и слоты - два других. Пользовательские события позволяют отправлять данные из дочернего компонента в родительский.

Передача событий от дочернего элемента к его родителю

Vue предлагает множество вариантов взаимодействия между компонентами. Один значительный способ связь между компонентами осуществляется через реквизит. Реквизиты позволяют отправлять данные от родительских к дочерним компонентам.

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

instagram viewer

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

Соглашение об именах для настраиваемых событий в Vue

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

В настоящее время стандартной практикой является определение пользовательских событий в kebab-case при работе с HTML-шаблонами и верблюдЧехол при работе с JavaScript. Однако вы можете выбрать любой вариант при работе с JavaScript, так как Vue компилирует все пользовательские события обратно в кебаб-кейс.

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

Как генерировать пользовательские события от дочернего к родительскому компоненту

Есть два способа генерировать пользовательские события в Vue. Вы можете генерировать пользовательские события встроенные (непосредственно в шаблоне Vue) с помощью $ излучать метод, который предоставляет Vue. Вы также можете воспользоваться определитьEmits макрос доступен из Vue 3.

Генерация пользовательских событий в Vue с помощью метода $emit

$ излучать, встроенный метод Vue, позволяет дочернему компоненту отправлять событие родительскому компоненту. Вы вызываете этот метод в строке (в шаблоне дочернего компонента), чтобы вызвать пользовательское событие. Метод $emit принимает два аргумента: имя события, которое вы хотите создать, и необязательную полезную нагрузку, которая может содержать дополнительные данные.

Рассмотрим этот дочерний компонент, который генерирует событие, чтобы уведомить родительский компонент о нажатии кнопки:

 ChildComponent.vue 
<сценарийнастраивать>
импортировать {ref} из 'vue';
постоянный пост = ссылка ('')
сценарий>
<шаблон>
<див>
<входтип="текст"v-модель="почта">
<кнопкаv-на: нажмите="$emit('нажатие кнопки', опубликовать)">Почтакнопка>
див>
шаблон>

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

Затем дочерний компонент привязывает элемент ввода к переменной post с помощью v-model, a Директива привязки данных Vue. Эта привязка позволяет изменениям, которые вы вносите в поле ввода, автоматически обновлять переменную публикации.

Элемент кнопки имеет директиву v-on, которая отслеживает события нажатия на кнопку. Щелчок по кнопке вызывает метод $emit с двумя аргументами: имя события, «нажатие кнопки» и значение переменной post.

Родительский компонент теперь может прослушивать пользовательское событие с помощью директивы v-on для обработка событий в Vue:

 РодительКомпонент.vue 
импортировать {ref} из "vue";
импортировать ChildComponent из "./components/ChildComponent.vue";
константный список сообщений = ссылка ([])


const addPosts = (сообщение) => {
 postList.value.push (сообщение)
}
сценарий>
<шаблон>
<див>
<дочерний компонент @по нажатию кнопки="добавить сообщения"/>
<ул>
<лиv-для="пост в списке постов">{{ почта }}ли>
ул>
див>
шаблон>

Этот блок кода демонстрирует родительский компонент, импортирующий и использующий дочерний компонент ранее. Родительский компонент определяет постСписок переменная массива в качестве реактивной ссылки. Затем компонент определяет addPosts функция, которая запускается, принимая почта аргумент. Функция добавляет новый пост в массив postList с толкать() метод.

@нажатие кнопки прослушиватель событий захватывает пользовательское событие дочерний компонент излучает при нажатии на кнопку. Это событие вызывает запуск функции addPosts. Наконец, блок кода прикрепляет v-для директива для списки рендеринга в Vue к элементу ul для перебора массива postList.

Генерация событий с помощью макроса defineEmits

Vue 3 представил определитьEmits макрос, который явно определяет события, которые может генерировать компонент. Этот макрос обеспечивает типобезопасный способ генерации событий, что приводит к более структурированной кодовой базе.

Вот пример того, как вы можете использовать макрос defineEmits и вызывать его в своем дочернем компоненте:

 ChildComponent.vue 
<сценарийнастраивать>
импортировать {ref} из "vue";
const emit = defineEmits(["нажатие кнопки"]);


постоянный пост = ссылка ("");


const buttonClick = () => {
 emit("нажатие кнопки", post.value);
};
сценарий>
<шаблон>
<див>
<входтип="текст"v-модель="почта" />
<кнопкаv-на: нажмите="КнопкаНажмите">Почтакнопка>
див>
шаблон>

Хотя функциональные возможности остаются прежними, существуют значительные различия в синтаксисе кода между приведенным выше блоком кода и блоком с $ излучать функция.

В этом кодовом блоке определитьEmits макрос определяет по нажатию кнопки событие. При вызове этого макроса блок кода возвращает функцию $emit, позволяющую генерировать определенные события. Массив, переданный в макрос defineEmits в компоненте, будет содержать все события, которые необходимо передать родительскому компоненту.

Затем блок кода определяет кнопкаНажмите функция. Эта функция отправляет событие нажатия кнопки и переменную post родительскому компоненту. Блок шаблона дочернего компонента содержит элемент кнопки.

Элемент кнопки имеет v-на: нажмите директива, запускающая функцию buttonClick. Затем родительский компонент может использовать дочерний компонент так же, как это было с методом $emit.

Разработчики Vue получают выгоду от компонентной архитектуры

Вы можете обмениваться данными от дочернего компонента с его родителем, отправляя события с помощью метода $emit и макроса defineEmits.

Вы можете извлечь выгоду из компонентной архитектуры Vue, поскольку она позволяет писать более структурированный и лаконичный код. С современными средами JavaScript, такими как Vue, вы можете использовать веб-компоненты, веб-стандарт W3C, для достижения этой архитектуры на основе компонентов.