Javascript 如何使用eventBus总线将更新传递到Vue组件中的视图？

侦听组件b中总线的自定义事件。但是，在组件a中调度事件后，它访问组件b。执行组件b的侦听功能，但未更新数据功能的

msg

请不要说Vuex

相关代码基于Vue CLi3

此处代码： A部分：

    <template>
      <div>
          Component A
          <button @click="sendMsg">pushB</button>
      </div>
    </template>
    <script>
    import bus from './bus'
    export default {
        methods: {
            sendMsg() {
                bus.$emit('send', 'hello Component B')
                this.$router.push('/bbb')
            }
        }
    }
    </script>

路由器：

const aaa = () => import('@/components/demo/bus/a')
const bbb = () => import('@/components/demo/bus/b')
export default new Router({
  routes: [{
      path: '/aaa',
      component: aaa
    },
    {
      path: '/bbb',
      component: bbb
    }]
})

我试着用“watch”来观察“msg”，但没用

你能帮我吗

---

如果可能的话，我想深入了解“总线”

只有当您发射时，组件A和组件B都出现在页面中时，这才有效。从代码中可以看出，您正在从组件A发出值，然后导航到组件B，并在那里期望该值

你所做的是踢一个球，然后追着它跑，然后捡起它却发现球不见了。你需要的是另一个已经在场的人来接球

这种情况下的解决方案可以是在localstorage中设置值，导航到其他路由，然后从localstorage读取值

---

如果您需要传递的值是一个简单的值，您可以在查询字符串中传递它，然后从组件B中的$router参数中读取。

您的代码将无法正常工作，因为您在从组件a发出事件后正在更改路由。因此组件B无法捕获它

---

您可以在混合中保存更改的值，也可以使用localstorage。您还可以使用前面回答中所述的查询字符串，这可能是因为您在装入组件B时附加了侦听器，这意味着它只能在装入组件B时侦听事件。当您单击组件A上的

pushB

按钮时，情况并非如此，因为组件B由于路由转换尚未装载。当您发出类似事件时，您的组件应该是父组件和子组件。如果它们不是一个包含在另一个中，并且您仍然希望它们通信（并且您不希望使用vuex）您可以有另一个Vue实例，它应该是事件总线实现。@equi我认为OP已经有一个Vue实例用于总线，并且没有使用

这个。$emit

但是

总线。$emit

其中

总线

是另一个Vue实例。@AbhishekGupta感谢您的评论，路由转换，我需要注意什么？在app.js/main.js window.bus=new Vue（）中；无需将其放入另一个js文件中

import Vue from 'vue';
export default new Vue()

const aaa = () => import('@/components/demo/bus/a')
const bbb = () => import('@/components/demo/bus/b')
export default new Router({
  routes: [{
      path: '/aaa',
      component: aaa
    },
    {
      path: '/bbb',
      component: bbb
    }]
})