Emit vue что это
Изменение данных компонента с помощью emit Vue.js
Дата публикации: 2019-08-30
От автора: в этом посте мы рассмотрим, как во Vue.js данные и их состояние могут передаваться из дочернего компонента в его родительский компонент с помощью emit — эмиттеров событий.
Прежде чем вы начнете…
Этот пост подходит для разработчиков всех уровней, включая начинающих. Вот несколько вещей, которые вы должны уже иметь, прежде чем читать эту статью:
Установленный Node.js версии 10.x и выше. Вы можете проверить это, выполнив в терминале / командной строке команду, приведенную ниже:
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Редактор кода — я настоятельно рекомендую Visual Studio Code
Последнюю версию Vue, установленную на вашем компьютере
Vue CLI 3.0. Для этого сначала удалите старую версию CLI:
Затем установите новую:
Скачать стартовый проект Vue можно здесь
Распакуйте загруженный проект
Перейдите в разархивированный файл и выполните приведенную ниже команду, чтобы обновить все зависимости:
Передача данных через компоненты
Чтобы передать значения данных из родительских компонентов (например, app.vue) в дочерние (например, вложенные компоненты) внутри компонента приложения, Vue.js предоставляет нам платформу, называемую props. Props можно назвать пользовательскими атрибутами, которые можно зарегистрировать в компоненте, что позволяет определять данные в родительском компоненте, присваивать ему значение, а затем передавать значение в атрибут prop, на который затем можно ссылаться в дочерних компонентах.
В этом посте мы покажем обратный процесс. Чтобы передать и обновить значения данных в родительском компоненте из дочернего компонента таким образом, чтобы все остальные вложенные компоненты также были обновлены, мы используем конструкцию emit для обработки запуска событий и обновления данных.
Демонстрация
Мы рассмотрим процесс отправки событий из дочернего компонента, настроим прослушивание родительского компонента для передачи данных из дочернего компонента и, наконец, обновим значение данных.
Если вы следовали этому руководству с самого начала, вы скачали и открыли стартовый проект в VS Code. Проект является законченным, полным кодом к этому посту.
Причина, по которой этот проект является стартовым, заключается в том, что вы можете поэкспериментировать с концепцией prop, прежде чем начать знакомство с процессом.
Vue.js для начинающих, урок 9: пользовательские события
На предыдущем уроке нашего курса по Vue вы узнали о том, как создавать компоненты, и о том, как передавать данные от родительских сущностей дочерним с использованием механизма входных параметров (props). А что если данные нужно передавать в обратном направлении? Сегодня, в девятом уроке, вы узнаете о том, как наладить двустороннюю связь между компонентами разного уровня.
Цель урока
Нам надо, чтобы компонент product мог бы сообщать родительской сущности, корневому экземпляру Vue, о том, что произошло некое событие. При этом product должен отправлять, вместе с уведомлением о возникновении события, некие данные.
Начальный вариант кода
В файле index.html учебного проекта сейчас находится такой код:
Вот — содержимое файла main.js :
Задача
Решение
Переместим данные, имеющие отношение к корзине, обратно в корневой экземпляр Vue:
Нажатие на кнопку Add to cart пока ни к чему не приводит
Сейчас он выглядит так:
Приведём его к такому виду:
Что всё это значит?
Но прямо сейчас ничто в приложении не ожидает появления этого события, не прослушивает его. Давайте добавим прослушиватель событий в index.html :
Этот метод, который теперь будет объявлен в объекте с опциями, используемом при создании экземпляра Vue, вы, точно, уже где-то видели:
Кнопка снова работает
Мы добились своей цели, но в реальном приложении знание о том, что произошло некое событие, что некий товар добавлен в корзину, особой пользы не принесёт. В реальности нужно знать хотя бы о том, какой именно товар добавлен в корзину. А это значит, что в событии, которое генерируется в ответ на нажатие на кнопку, нужно передавать ещё и какие-то данные.
Теперь в событии передаётся идентификатор ( variantId ) товара, который пользователь хочет добавить в корзину. Это значит, что мы, вместо того чтобы просто увеличивать количество товара в корзине, можем пойти дальше и хранить в корзине более подробные сведения о добавленных в неё товарах. Для этого сначала преобразуем корзину в массив, записав пустой массив в cart :
После однократного нажатия на кнопку в массив попадает идентификатор товара. Массив выводится на странице.
Массив с идентификатором товара выводится на странице
, в котором выводятся сведения о количестве товаров, добавленных в корзину, так:
На странице выводятся сведения о количестве товаров, добавленных в корзину
Практикум
Добавьте в проект кнопку, которая удаляет из массива cart товар, добавленный туда ранее. По нажатию на эту кнопку должно генерироваться событие, содержащее сведения об идентификаторе товара, который нужно убрать из корзины.
Пользовательские события
Подразумевается, что вы уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала.
Стиль именования событий
В отличие от компонентов и входных параметров, имена событий не предоставляют никакой автоматической трансформации стиля именования события. Вместо этого, имя генерируемого события должно точно соответствовать имени, используемому при прослушивании события. К примеру, если генерируем событие с именем в camelCase:
Прослушивание kebab-cased версии этого имени не будет иметь никакого эффекта:
В отличие от компонентов и входных параметров, имена событий никогда не будут использоваться в качестве имён переменных или имён свойств в JavaScript, поэтому нет причин использовать camelCase или PascalCase. Кроме того, директивы прослушивания событий v-on внутри DOM-шаблонов автоматически преобразуются в нижний регистр (из-за нечувствительности HTML к регистру), поэтому v-on:myEvent станет v-on:myevent — что делает прослушивание события myEvent невозможным.
По этим причинам мы рекомендуем всегда использовать kebab-case для имён событий.
Настройка v-model у компонента
Теперь, когда используем v-model на этом компоненте:
Обратите внимание, что вам всё равно нужно объявлять входной параметр checked в опции props компонента.
Подписка на нативные события в компонентах
В некоторых случаях нам может понадобиться «двусторонняя привязка» для входных параметров. К сожалению, настоящая двусторонняя привязка может создавать проблемы с поддержкой, поскольку дочерние компоненты смогут мутировать состояние родителя без источника, который является очевидным как у родителя, так и у потомков.
Затем, родитель может прослушать это событие и обновить локальное свойство, если захочет. Например:
Это передаёт каждое свойство в объекте doc (например, title ) в качестве индивидуальных входных параметров, а затем добавляет слушатели событий v-on для каждого из них.
Vue: передача данных между компонентами
или отправка данных с помощью событий
Nov 12, 2016 · 4 min read
Обновлено 06.01.2018: Пересмотрел свежим взглядом и внёс мелкие правки. Заходите и в Telegram-канал по Vue: https://t.me/vuejs_ru
Компонентный подход — появился не просто так, логика приложения чётко разделяется между его частями, всё изолировано друг от друга, каждая часть знает лишь о том, о чём нужно знать.
Основа работы Vue — однонаправленный поток данных. Это значит что данные из компонентов верхних уровней, передаются в компоненты нижних уровней через входные параметры (или props). А для обратной связи наверх используются события (дочерние компоненты уведомляют о произошедшем событии и, возможно, передают какие-то данные).
В родительском расположена логика работы со списком: как загружать элементы, как добавлять новый элемент в список и как удалять.
Дочерний занимается только отображением самого элемент списка. Кроме того, в дочернем элементе списка есть кнопка удаления. Нужно по нажатию кнопки удалять этот элемент из списка.
Сам элемент себя не удалит, он даже не знает что такой список есть и что он в нём находится. Поэтому дочернему компоненту надо как-то родительский компонент уведомить о необходимости удаления и заодно передать id для ясности.
Есть несколько вариантов, начнём с правильного…
Генерация события в дочернем компоненте и обработка в родительском
В дочернем компоненте делаем обработчик нажатия кнопки удаления и в методе обработчика генерируем событие:
# Custom Events
This page assumes you’ve already read the Components Basics. Read that first if you are new to components.
# Event Names
Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camelCase, you will be able to add a kebab-cased listener in the parent:
As with props casing, we recommend using kebab-cased event listeners when you are using in-DOM templates. If you’re using string templates, this limitation does not apply.
# Defining Custom Events
Emitted events can be defined on the component via the emits option.
When a native event (e.g., click ) is defined in the emits option, the component event will be used instead of a native event listener.
It is recommended to define all emitted events in order to better document how a component should work.
# Validate Emitted Events
Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the array syntax.
# v-model arguments
By default, v-model on a component uses modelValue as the prop and update:modelValue as the event. We can modify these names passing an argument to v-model :
In this case, child component will expect a title prop and emits update:title event to sync:
# Multiple v-model bindings
By leveraging the ability to target a particular prop and event as we learned before with v-model arguments, we can now create multiple v-model bindings on a single component instance.
Each v-model will sync to a different prop, without the need for extra options in the component:
# Handling v-model modifiers
Modifiers added to a component v-model will be provided to the component via the modelModifiers prop. In the below example, we have created a component that contains a modelModifiers prop that defaults to an empty object.
Now that we have our prop set up, we can check the modelModifiers object keys and write a handler to change the emitted value. In the code below we will capitalize the string whenever the element fires an input event.
For v-model bindings with arguments, the generated prop name will be arg + «Modifiers» :
Deployed on Netlify.
Caught a mistake or want to contribute to the documentation? Edit this on GitHub!
(opens new window)
Last updated: 2021-12-01, 09:12:09 UTC