兄弟组件之间的Vue共享状态

时间:2017-08-23 06:18:36

标签: vue.js vuejs2

我可能不想使用vuex进行状态管理,因为它现在可能有点过分了。 我看了https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication。我正在使用单个文件组件,因此我不确定在何处定义共享总线,以便两个组件都可以引用它。

end-date

ChildA.Vue

var bus = new Vue()

ChildB.Vue

watch: {
  sideNav: (newValue) => {
    bus.$emit('sideNav-changed', newValue)
  }
}

Parent.Vue

created () {
  bus.$on('sideNav-changed', data => {
    console.log(`received new value: ${data}`)
    // update own copy here
  })
}

我想在ChildA上观看<template> <childA> </childA> <childB> </childB> </template> 的任何更改,并将其发送到ChildB以更新自己的值。

3 个答案:

答案 0 :(得分:1)

找到答案......

我在main.js

上声明了它
const bus = new Vue() // Single event hub

// Distribute to components using global mixin
Vue.mixin({
  data: function () {
    return {
      bus : bus 
    }
  }
})

并且还要改变

watch: {
  sideNav: (newValue) => {
    bus.$emit('sideNav-changed', newValue)
  }
}

watch: {
  sideNav: function (newValue) {
    bus.$emit('sideNav-changed', newValue)
  }
}

答案 1 :(得分:0)

this answer对你有好处吗?你可以用事件做任何事情,但如果你能避免它们,你应该。你现在可能不想要vuex。这就是我的位置。但是,从一开始,您就想要一个全球范围内的商店和反应管道。你&#34;声明&#34;页面上的元素与商店中的项目之间的关系,然后是basta。 Vue负责其余的工作。你不关心事件。

答案 2 :(得分:0)

最简单的方法是将它附加到窗口,即

window.bus = new Vue()

然后它将在所有组件中可用,而无需定义全局混音,例如这仍然有效:

watch: {
  sideNav(newValue) {
    bus.$emit('sideNav-changed', newValue)
  }
}

希望这有帮助!