Vue 在兄弟组件之间共享状态答案

【问题标题】：Vue sharing state between sibling componentsVue 在兄弟组件之间共享状态
【发布时间】：2017-08-23 06:18:35
【问题描述】：

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

var bus = new Vue()

ChildA.Vue

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

ChildB.Vue

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

Parent.Vue

<template>
  <childA>
  </childA>
  <childB>
  </childB>
</template>

我想观察 ChildA 上 sideNav 的任何变化并将其发送给 ChildB 以更新其自身的值。

【问题讨论】：

标签： vue.js vuejs2

【解决方案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)
  }
}

【讨论】：

你“改变”sn-ps 在这种情况下是等价的。你的意思是this.bus.$emit？
啊是的，不仅如此，注意函数的声明。他们不一样
我知道它们不一样，但在你的情况下它们是等价的，因为你似乎没有使用this，所以没有必要更改为箭头函数。

【解决方案2】：

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

【讨论】：

【解决方案3】：

执行此操作的最简单方法是将其附加到窗口，即

window.bus = new Vue()

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

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

希望这会有所帮助！

【讨论】：