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

Передача данных дочернему компоненту

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

Здесь мы создали компонент под названием «invoice-item». Этот компонент принимает одно свойство, называемое «количество». Мы определили в списке реквизитов, что «количество» должно быть числом. Постарайтесь быть как можно более конкретным, когда вы устанавливаете, какие реквизиты должны быть разрешены. Можно просто использовать «реквизиты: [‘количество’]», но это не лучшая практика, и компонент не будет знать, какой тип данных ему передается.

См. Pen Как общаться между компонентами — 1 от Vue Hero (@vuehero) на CodePen.

Если бы мы хотели, чтобы значение количества было динамическим, мы могли бы привязать к нему значение, используя v-bind. Нравится:

Вот еще несколько способов передать данные дочернему компоненту:

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

Передача данных обратно в родительский компонент

Допустим, у нас есть компонент, который содержит форму. В этом случае часто необходимо передать данные обратно родительскому компоненту. Это можно сделать несколькими способами. Вот пример того, как это сделать с помощью $emit.

Здесь мы сделали то, что сначала вставили компонент в шаблон и передали количество, как и раньше. Мы добавили прослушиватель событий (@increase — это то же самое, что и v-on:increase), который при вызове вызывает увеличениеQuantity.
Внутри созданного нами компонента мы принимаем количество как свойство, а внутри шаблона мы добавили @ click listener, который вызывает метод увеличения внутри нашего дочернего компонента. Внутри метода увеличения мы вызываем $emit, который передает информацию обратно своему родителю.

См. Pen Как общаться между компонентами — 2 от Vue Hero (@vuehero) на CodePen.

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

Передача данных с помощью шины событий

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

Здесь вы видите, что в родительском компоненте (Invoice) мы добавили прослушиватель в корень при монтировании компонента. Этот прослушиватель событий можно добавить ко всем другим компонентам в приложении благодаря шине событий, которая используется в элементе $root.

Резюме

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

Первоначально опубликовано на vuehero.com.