Vuejs 中兄弟组件之间的通信

Question

Communication between parent and child 组件使用 $broadcast 和 $dispatch

非常简单

我试图解决的问题是同级组件之间的通信。我目前所做的是运行 child 上的 $dispatch 然后被 parent vm 上的事件捕获，而 $broadcast ] 到兄弟组件。

IE（non-functional，简化示例）：

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

普通 Vue.js 同级组件的通信只能通过您在示例中描述的父级完成。

为更复杂的应用程序处理这些情况的更复杂的方法是中央状态管理器。

Vue.js 创建者发布了一个类似 redux 的组件，当与 vuejs 一起使用时，它通过在商店上调度的动作更新它们的状态。然后 vuejs 框架的 'reactiveness' 获取对组件状态所做的任何更改并重新渲染它们。

组件的文档非常好
Vuex
Vuex Documentation
Vuex todo mvc example

Vuejs 中兄弟组件之间的通信

Communication between sibling components in Vuejs

javascript

vue.js