javascript – VueJs 2.0中兄弟组件之间的通信

在vuejs 2.0中,model.sync将是deprecated.

那么,vuejs 2.0中兄弟组件之间进行通信的正确方法是什么？

我在Vue 2.0中发现的想法是通过使用商店或事件总线进行兄弟姐妹的沟通.

根据evan：

It’s also worth mentioning “passing data between components” is
generally a bad idea, because in the end the data flow becomes
untrackable and very hard to debug.

If a piece of data needs to be shared by multiple components, prefer
07003 or 07004.

[Link to discussion]

和：

.once and .sync are deprecated. Props are now always one-way down. To
produce side effects in the parent scope, a component needs to
explicitly emit an event instead of relying on implicit binding.

(所以,他suggest是使用$emit和$on)

我很担心因为：

>每个商店和活动都具有全球可见性(如果我错了,请纠正我);
>为每个次要的沟通创建一个新的商店是很重要的;

我想要的是以某种方式确定事件的范围或存储兄弟姐妹组件的可见性.或者也许我没有抓住这个想法.

那么,如何以正确的方式沟通？

解决方法:

使用Vue 2.0,我正在使用documentation中演示的eventHub机制.

>定义集中式事件中心.

const eventHub = new Vue() // Single event hub

// Distribute to components using global mixin
Vue.mixin({
    data: function () {
        return {
            eventHub: eventHub
        }
    }
})

>现在,您可以在组件中发出事件

this.eventHub.$emit('update', data)

>听你说

this.eventHub.$on('update', data => {
// do your thing
})

更新
请在@alex之前查看anwer,它描述了更简单的解决方案.

标签：vuex,javascript,vue-js,vue-component,vuejs2
来源： https://codeday.me/bug/20190915/1805935.html