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

一尘不染

javascript

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

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

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

根据Evan（Vue的创建者）的说法：

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

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

和：

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

因此，Evan建议使用$emit()和$on()。

让我担心的是：

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

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

阅读 537

2020-05-01

共1个答案

一尘不染

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

组件1：

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

组件2：

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

2020-05-01