Vue.js Связь между компонентами

• Реквизит
• События для общения детей с родителями
• Использование шины событий для связи между любыми компонентами
• Альтернативы

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

Реквизит

Первый способ – это использование реквизита.

Родители “передают” данные, добавляя аргументы в объявление компонента:

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

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

Использование событий для передачи информации от детей к родителям

События позволяют вам общаться от детей до родителей:

Родитель может перехватить это с помощью директивы von при включении компонента в свой шаблон:

Вы, конечно, можете передавать параметры:

и извлекать их из родительского:

Использование шины событий для связи между любыми компонентами

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

Вы можете использовать так называемую Шину событий .

Выше мы использовали this.$emit для создания события в экземпляре компонента.

Что мы можем сделать вместо этого, так это передать событие в более общедоступный компонент.

этот.$root , корневой компонент, обычно используется для этого.

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

Любой другой компонент может прослушивать это событие. Вы можете сделать это в смонтированном обратном вызове:

Альтернативы

Это то, что Vue предоставляет “из коробки”.

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

Оригинал: “https://flaviocopes.com/vue-components-communication/”