javascript - Vue.js 2.0 中兄弟组件之间的通信

Question

概览

在 Vue.js 2.x 中，model.sync will be deprecated .

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

---

背景

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

根据 Evan (Vue.js 的创建者):

It's also worth mentioning "passing data between components" isgenerally a bad idea, because in the end the data flow becomesuntrackable and very hard to debug.

If a piece of data needs to be shared by multiple components, preferglobal stores or Vuex.

[ Link to discussion ]

和:

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

所以，Evan suggests使用 $emit() 和 $on()。

---

疑虑

让我担心的是:

• 每个 store 和 event 都具有全局可见性(如果我错了请纠正我)；
• 为每个次要通信创建一个新商店太浪费了；

我想要的是一些scope events 或stores 兄弟组件的可见性。 (或者可能是我没有理解上面的思路。)

---

问题

那么，兄弟组件之间的正确通信方式是什么？

Answer 1

您甚至可以缩短它并使用 root Vue 实例作为全局事件中心:

组件 1:

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

组件 2:

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