小编典典

VueJs 2.0中同级组件之间的通信

javascript

总览

在Vue.js2.x中,model.sync将不推荐使用。

那么,在[Vue.js2.x中的]兄弟组件之间进行通信的正确方法是什么?


背景

据我了解Vue 2.x,同级通信的首选方法 是使用商店或事件总线

根据Evan(Vue的创建者)的说法:

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

如果一条数据需要由多个组件共享,则首选全局存储或Vuex。

和:

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

因此,Evan建议使用$emit()$on()


顾虑

让我担心的是:

  • 每个storeevent具有全球知名度(纠正我,如果我错了);
  • 为每次次要沟通创建新的商店太浪费了;

我想要的是兄弟姐妹组件的某种 范围 eventsstores可见性。(或者也许我不理解上面的想法。)


那么,同级组件之间进行通信的正确方法是什么?


阅读 618

收藏
2020-05-01

共1个答案

小编典典

你甚至可以使其更短,并将根 Vue实例用作全局事件中心:

组件1:

this.$root.$emit('eventing', data);

组件2:

mounted() {
    this.$root.$on('eventing', data => {
        console.log(data);
    });
}
2020-05-01