Vue 2 довольно строго относится к обмену данными между компонентами. Стандартный способ взаимодействия между компонентами заключается в том, что родители передают свойства дочерним элементам, а дочерние элементы - передают события $ emit родительскому компоненту. Вы начинаете сталкиваться с проблемами, когда вам нужно сгенерировать событие и перехватить его несколькими компонентами вверху дерева или в компоненте-брате. Вы обнаружите, что отправляете одни и те же данные вверх или вниз по цепочке или оба вверх и вниз для родственных компонентов.
На приведенной выше диаграмме, если вы хотите создать событие в компоненте C и заставить что-то отреагировать в компоненте A, вам потребуется $ emit events на всем пути вверх по цепочке до корневого компонента, а затем передать опору компоненту A из корень. Это довольно грязно!
Решить эту проблему можно двумя способами:
- Автобус глобальных событий
- Vuex (не рассматривается в этом сообщении)
Метод Vuex будет включать в себя изменение части данных в вашем хранилище данных из компонента C, а затем реакцию компонента A на данные в общем состоянии.
Метод глобальной шины событий довольно прост. Вы создаете другой экземпляр Vue, в котором ничего нет. Затем используйте это для $ emit событий и используйте $ on для реакции на событие.
Вот пример файла main.js, в котором я привязал шину событий к прототипу Vue, чтобы получить доступ к шине из моих компонентов через this. $ Emit () или this. $ On ( )
