Vue.js Компоненты связи

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

Реквизит

Первый способ использует реквизит Отказ

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

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

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

События для общения от детей до родителя

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

Родитель может перехватить это, используя V-на Директива при включении компонента в его шаблоне:

Вы можете пройти параметры, конечно,

и извлечь их в родитель:

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

Использование событий, которые вы не ограничиваетесь от детей-родительских отношений.

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

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

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

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

Вы также можете создать VUE-компонент, посвященный этой работе, и импортировать его там, где вам нужно.

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

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

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

Когда вы перерастаете это, вы можете посмотреть в Vuex или другие библиотеки 3-го частей.

Я работаю над курсом Vue.js. Если вы заинтересованы в изучении Vue, Получить в список Чтобы получить бесплатную электронную книгу на 100+ страниц о Vue Foodementals на следующей неделе!

Оригинал: “https://dev.to/flaviocopes/vuejs-components-communication-3cgo”