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

在vuejs 2.0 model.sync中将被弃用。


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


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


据埃文说:


值得一提的是“在组件之间传递数据”通常是一个坏主意,因为最终数据流变得无法跟踪并且很难调试。


如果一个数据需要由多个组件共享,则更喜欢 全局存储或Vuex。


[ 链接到讨论 ]


和:


.once并且.sync已弃用。道具现在总是单向下降。要在父作用域中产生副作用,组件需要显式地emit显示事件而不是依赖于隐式绑定。


(所以,他建议使用$emit和$on)


我很担心因为:


每个store并event具有全球知名度(纠正我,如果我错了);

为每个次要的沟通创建一个新的商店是很重要的;

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


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


撒科打诨
浏览 1353回答 3
3回答

眼眸繁星

使用Vue 2.0,我正在使用文档中演示的eventHub机制。定义集中式事件中心。const eventHub = new Vue() // Single event hub// Distribute to components using global mixinVue.mixin({    data: function () {        return {            eventHub: eventHub        }    }})现在在您的组件中,您可以发布事件this.eventHub.$emit('update', data)并且倾听你的意思this.eventHub.$on('update', data => {// do your thing})

慕仙森

您甚至可以缩短它并将根 Vue实例用作全局事件中心:第1部分:this.$root.$emit('eventing', data);第2部分:mounted() {    this.$root.$on('eventing', data => {        console.log(data);    });}
打开App,查看更多内容
随时随地看视频慕课网APP