Передача данных во Vue.js — как это работает?

Spread the love

Перевод статьи DavidMM : Vue data flow — How it works?

Когда я изучал Vue, одной из самых сложных вещей было понимание того, как передавать данные во Vue. EventBus, Vuex, Props … Что это такое? Что из них я должен использовать?

Давайте узнаем их различия и когда нужно использовать каждый из них.


Внутри компонента

Это самое базовая использование Vue. Одна страница с одним компонентом. Это похоже на Vanilla Javascript с оттенком реактивности (как только вы изменяете объект, представление обновляется).

Вот часть HTML:

А вот и Javascript:

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

В 23-й строке раздела HTML вы найдете функцию «on-click», которая переключает текущее задание между завершенным и незавершенным состояниями, а в строке 25 — другое, чтобы установить текущее задание для редактирования. Двухстороннее связывание данных делает все работу.

Методы взаимодействуют и изменяют данные (массив «todos»), достигая To-Do через «this». Как я уже сказал, это выглядит почти так же как если бы это был бы обычный Javascript.

Но что, если у нас есть два компонента в разных местах? Или три? Что, если один компонент является родительским для другого, и нам нужно передавать информацию между компонентами?


Props и $emit — для компонентов родителей и их потомков

Допустим, у нас есть представление, разделенное на несколько компонентов, с дочерними компонентами внутри компонентов, вот как то так:

Как видите, оранжево-желтый основной компонент действует как корень каждого компонента. Внутри 3 компонента: красный, фиолетовый и зеленый. Некоторые из компонентов имеют дочерний компонент, что делает его веб-приложением 3 уровня.

Что делать, если вы хотите передать информацию из красного компонента в один из дочерних зеленых компонентов. Как бы вы это сделали?

Вы можете отправить информацию родителю с помощью $emit, а затем дочернему компоненту с помощью props. Это будет выглядеть как то так:

Вот как я использовал $emit и props:

Выглядит немного сложновато, но в действительности все довольно просто, когда вы освоитесь. Отправляйте свои данные с помощью $emit в верхний компонент, а вниз с помощью props.

Но что, если мы хотим отправить информацию между компонентами с несколькими уровнями между ними? Нам нужно будет использовать 4 $emits и 2 props?

Ну, конечно так можно сделать. Но это было бы сумасшествием.

Лучше в этом случае использовать EventBus.


EventBus — из любого места в любое место

Глобальный EventBus работает как «Родитель всех компонентов». Этот компонент имеет доступ ко всем компонентам, в которые он был загружен.

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

Вот как это работает:

Намного проще, не правда ли? Просто добавьте компонент Vue с именем «EventBus» в ваш main.js и используйте его как способ отправки / получения сигналов от компонентов.

Хотя это отличный способ может работать с небольшими и средними приложениями, но более стандартный способ это использование Vuex


Vuex — наш менеджер состояний

Vuex — это шаблон управления состоянием Vue для приложений Vue.js.

Думайте о нем как о централизованном хранилище данных или «единственном источнике правды».

Vuex действует как единое центральное хранилище для всех компонентов в одном приложении. Кроме того, отслеживает все методы (или мутации) и помогает вам управлять всеми данными в вашем веб-приложении.

Если вы используете Vue Devtools, вы можете использовать их интересные функции, такие как отслеживание или просмотр всех данных, хранящихся в Vuex.

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

Хотя веб-приложение несколько усложняется, добавлением накладных расходов, оно очень помогает разделить всю логику в один файл, предоставляя доступ к нескольким независимым компонентам и многому другому.

Давайте посмотрим, как я использовал его в реальной обстановке:

Снова довольно просто. Мы загружаем все функции и данные в файл store.js, который станет нашим «Единственным источником правды». Затем для каждого необходимого компонента мы загрузим нужные нам части.


Какой из подходов я должен использовать?

Как всегда ответ зависит от ваших потребностей … .

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

  • Один компонент: так же, как вы бы использовали Vanilla Javascript
  • Props и $emit: если у вас есть несколько компонентов рядом друг с другом. Props отлично работает, когда у вас есть несколько компонентов, и нам нужно передавать разные данные (например, у нас есть 4 таблицы с разными наборами данных в каждой)
  • EventBus: Если у вас есть более чем пару компонентов, если структура вашего веб-приложения устанавливает ваши компоненты более горизонтально (родственные компоненты вместо родительских), чем по вертикали, и запускать функции (например, для активации уведомления)
  • Vuex: Если у вас есть веб-приложение от среднего до большого размера, где вы используете сложную логику и хотите отслеживать все изменения ваших данных, использовать API и т. д.

Опыт научит вас, когда использовать каждый из них.

Например, я использую Vuex в каждом приложении, даже в небольших (я люблю отслеживать свои данные), так же использую EventBus, чтобы запускать функции для определенных событий, когда я создаю компонент, который я использую несколько раз с различными данными.

Заключение

Читать (и писать) о том, какие методы обработки данных мы можем использовать, было круто, но вы должны практиковаться. Я написал небольшой пост, более ориентированный на код, чем этот, где я объяснял теорию. Вы можете прочитать о теории передачи данных здесь: Passing data in Vue

И, конечно же, у нас есть отличная документация по Vue:

Props и $emit

Global Event bus

Vuex

Была ли вам полезна эта статья?
[22 / 2.3]

Spread the love
Подписаться
Уведомление о
guest
7 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Lenur
Lenur
1 год назад

На картинках нужно было добавить возможность увеличения, иначе получается *вырви глаз*. Или выложили бы код куда-то.
А так спасибо за статью.

Алекс
Алекс
1 год назад

Статья вообще теряет смысл с такими чудо-картинками.

Алексей
Алексей
11 месяцев назад

Вот реально, написал статью, а картинки зажал автор, за это 1 звезда тока.

Евгений
11 месяцев назад

а как скриншоты кода увеличить? они что реально такого низкого качества?

Владимир
Владимир
10 месяцев назад

пофиг, что картинки хреновые, спасибо тебе бро! нигде не мог найти примеры использования входных параметров именно с однофайловыми компонентами и еб..лся со строковыми шаблонами до сего момента <3

Анонимно
Анонимно
6 месяцев назад

Код на картинках не читабельный 😕

Хомяк
Хомяк
1 месяц назад

На десктоп версии страницы скринов вообще нет. Браузер SRWare Iron (на хроме), win 10. Недавно читал на андроиде и всё было норм. Все скрины, помимо последнего, кое-как можно прочесть.

7
0
Будем рады вашим мыслям, пожалуйста, прокомментируйте.x
()
x