javascript - Vuejs 中兄弟组件之间的通信

Question

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

组件非常简单

我试图解决的问题是同级组件之间的通信。我目前所做的是在子级上运行 $dispatch ，然后被父级 vm 上的事件捕获，而父级 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 中找不到很好的例子。处理这个。上面的例子是我最好的解决方案。

有没有人有一个很好的例子来说明如何以更有效的方式处理这个问题？我的目标是当我从 Brother 那里 $broadcast 或 $dispatch 时，这将立即被 Sister 接收。这样做时，我不必用中间事件弄乱根 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 一起使用时，它通过在商店上调度的 Action 更新它们的状态。然后 vuejs 框架的“ react 性”获取对组件状态所做的任何更改并重新呈现它们。

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