Связь между компонентами двойников в Vuejs

Question

Communication between parent and child компоненты довольно просто с помощью $broadcast и $dispatch

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

IE (нефункциональные, упрощенный пример):

new Vue({ 
    components: { Brother, Sister }, 
    events: { 
     'brother-to-sister-event': function(message) { 
      this.$broadcast('message-to-sister', message); 
     } 
}); 

Brother 
    this.$dispatch('brother-to-sister-event', message) 

Sister 
    events: { 
     'message-to-sister': function(message) { 
      alert('Message from Brother receiced!'); 
     } 
    } 

Я просто чувствую, что я делаю много пинг-понг с тем, как мои данные получает ходило между компонентами двойников. Я не мог найти хороший пример в documentation для обработки этого. Вышеприведенный пример - мое лучшее предложение для его решения.

Есть ли у кого-нибудь хороший пример того, как справиться с этим более эффективным способом? То, к чему я стремлюсь, - это когда я $broadcast или $dispatch от брата, это будет немедленно подобрано сестрой. При этом мне не нужно загромождать корень vm с промежуточными событиями.

Таким образом, решение было бы что-то вроде:

new Vue({ 
    components: { Brother, Sister } 
}); 

Brother 
    this.$dispatch('brother-to-sister-event', message) 

Sister 
    events: { 
     'brother-to-sister-event': function(message) { 
      alert('Message from Brother receiced!'); 
     } 
    } 

Но мне не удалось получить что-то вроде этого, чтобы работать.

Answer 1

Plain Vue.js связь компонентов для родных может выполняться только через родителя, как вы описываете на своем примере.

Более сложный способ обработки этих случаев для более сложных приложений - это центральный государственный менеджер.

Создатель Vue.js опубликовал компонент, похожий на сокращение, который при использовании с vuejs обновляет свое состояние, хотя действия отправляются в магазины. Затем «реактивность» vuejs-структуры подбирает любые изменения, внесенные в состояние компонента, и повторно отображает их.

Документации компоненты действительно хороший
Vuex
Vuex Documentation
Vuex todo mvc example