vue.js 非父子组件间通信问题

Question

为啥点击发送bus.$emit触发事件发送数据后，到bus.$on那块没有反应。。然后回来再次点击触发bus.$emit的那个按钮才能打印出来console.log(data)的结果。。。

这是我的触发按钮

        test(){
            bus.$emit('OTT','你好吗')
        }
        

这是接收的，写在mounted中

  bus.$on('OTT',(value)=>{
            console.log(value)
            //this.tests = value;
        })

Answer 1

你确定用的是同一个 bus

Answer 2

我甚至现学的eventbus,用了一下都没出错...

Answer 3

bus如何引入的

Answer 4

这个你可以看看有没有帮助 http://www.cnblogs.com/CccZss...
几个月之前用过Vue 现在不太记得怎么通信了。

Answer 5

总线中心 Bus 的实现思想是先把自己在 main.js 里进行全局注册，这样在每个组件都能通过 this 访问到它，由于 Bus 本身就是一个 vue 实例，所以具备 $emit 和 $on 方法，这样我们就能在 Bus 上通过自定义事件的方式发送和监听事件来传递数据，而且不受组件的位置关系影响。

Answer 6

main.js

const app = new Vue({
    el: '#app',
    data: {
        eventHub: new Vue()
    },
    render: h=>h(App)
});

组件A:

this.$root.eventHub.$emit('something','data')

组件B

this.$root.eventHub.$on('something',function(data){
       console.log(data)
})

Answer 7

你确定发送消息的时候监听组件已经加载？
排查一下bus.$emit之前监听组件的mounted执行了没有