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

Допустим, есть задача связать корневой компонент или приложение Vue.js с дочерними компонентами и наоборот.

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

Стоит отметить, что данный подход предполагает использование событий по нисходящей и свойств элемента по восходящей

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

От корневого к дочернему:

От дочернего к корневому:

Тут еще один пример двунаправленной передачи:

Пожалуйста, оцените материал

WebSofter

Web - технологии