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

  • Z时代
  • 2024-01-10
  • 分类：问答

总览

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

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

背景

据我了解Vue 2.x，同级通信的首选方法 。

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

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

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

和：

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

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

顾虑

让我担心的是：

  • 每个store并event具有全球知名度（纠正我，如果我错了）;

  • 为每次次要沟通创建新的商店太浪费了；

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

题

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

回答：

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

组件1：

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

组件2：

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

以上是 VueJs 2.0中同级组件之间的通信 的全部内容， 来源链接： utcz.com/qa/420121.html

回到顶部