Question

使用$broadcast和$dispatch

，

Communication between parent and child组件非常简单

我试图解决的问题是兄弟组件之间的沟通。我目前所做的是在孩子身上运行$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

普通Vue.js兄弟组件的通信只能通过您在示例中描述的父进程来完成。

更复杂的应用处理这些案例的更为软化的方式是中央州经理。

Vue.js创建者发布了一个类似redux的组件，当与vuejs一起使用时，通过在商店中调度的动作更新其状态。然后是“反应性”＃39; vuejs框架获取对组件状态所做的任何更改并重新呈现它们。

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

Vuejs中兄弟组件之间的沟通

1 个答案: