Vue在同级组件之间共享状态

lstz6jyr 于 2023-01-31 发布在 Vue.js

关注(0)|答案(3)|浏览(152)

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

var bus = new Vue()

儿童A.Vue

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

儿童视力检查

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

父版本

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

我想观察ChildA上sideNav的任何更改，并将其发送到ChildB以更新其自身的值。

vue.js

来源：https://stackoverflow.com/questions/45831997/vue-sharing-state-between-sibling-components

3条答案

按热度按时间

whhtz7ly1#

找到了答案...
我在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)
  }
}

赞(0）回复(0）举报 2023-01-31

bfnvny8b2#

this answer对你有什么好处吗？你可以用事件做任何事情，但是如果你能避免它们，你应该这样做。你现在可能不需要vuex。这就是我的想法。但是你从一开始就需要一个全局范围的存储和React管道。你“声明”页面上的元素和存储中的项之间的关系。然后是basta剩下的就交给Vue了你不关心事件。

赞(0）回复(0）举报 2023-01-31

bvjveswy3#

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

window.bus = new Vue()

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

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

赞(0）回复(0）举报 2023-01-31

我来回答

Vue在同级组件之间共享状态

3条答案

相关问题

热门标签

最新问答