你如何通过 eventBus 总线将更新传送到 Vue 组件中的视图？

Question

侦听组件 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>

B组份：

<template>

    <div>

        <p>component B：{{ msg }}</p>

    </div>

</template>

<script type="text/javascript">

import  bus  from './bus'

export default {

    data () {

        return {

            msg: 'bbb'

        }

    },

    mounted () {

        bus.$on('send', data => {

            console.log(data)

            console.log(this)

            this.msg = data

        })    

    } 

}

</script>

总线.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

    }]

})

我尝试使用 'watch' 来观察 'msg'，但是没有用。

你能帮助我吗？

如果可能，我想深入了解“巴士”

Answer 1

这仅在您发出时页面中同时存在组件 A 和组件 B 时才有效。从代码来看，您似乎是从组件 A 发出值，然后导航到组件 B 并期望那里的值。你正在做的事情就像踢一个球，然后追着它跑，然后捡起来却发现球已经消失了。您需要的是已经在该位置的另一个人接球。这种情况下的解决方案可以是在 localstorage 中设置值，导航到另一条路由，然后从 localstorage 读取值。如果您需要传递的值是一个简单的值，您可以将它传递到查询字符串中，然后从组件 B 中的 $router params 中读取。

Answer 2

从组件 A 发出事件后，您的代码将无法按预期工作，因为您正在更改路线。因此它无法被组件 B 捕获。您可以在此处为 mixins或使用 localstorage在混合外观中保存更改的值。您还可以使用先前答案中所述的查询字符串