Vue.js 2.0 中同级组件之间的通信概述问题

javascript vue.js vue-component vuejs2 vuex

2022-08-30 02:30:00

概述

在 Vue.js 2.x 中，model.sync 将被弃用。

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

背景

据我所知，Vue.js 2.x，同级通信的首选方法是使用存储或事件总线。

根据Evan（Vue的创造者.js）：

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

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

[讨论链接]

和：

.once并被弃用。道具现在总是单向下降。若要在父作用域中产生副作用，组件需要显式地创建事件，而不是依赖于隐式绑定。.syncemit

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

关注

我担心的是：

每个人都有全球知名度（如果我错了，请纠正我）;storeevent
为每个次要通信创建新商店太浪费了;

我想要的是同级组件的一些范围或可见性。（或者也许我不明白上面的想法。eventsstores

问题

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

答案 1

甚至可以缩短它，并将根实例用作全局事件中心：Vue

构成部分1：

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

构成部分2：

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

答案 2

在 Vue.js 2.0 中，我使用的是 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的答案，其中描述了一个更简单的解决方案。