Question

我可能不想使用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以更新自己的值。

Answer 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)
  }
}

Answer 2

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

Answer 3

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

window.bus = new Vue()

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

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

希望这有帮助！

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

3 个答案: