vue路由切换的时候监听不到bus.$on()事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <div >
            <button @click="send"> 这是测试</button>
            <router-link to="/list">切换</router-link>
        </div>
        <router-view ></router-view>
    </div>
    <template id="list">
        <div>测试页面{{msg}}</div>
    </template>
</body>
</html>
<script>
    var bus=new Vue()
    list={
        template:'#list',
        data(){
            return{ msg:'aaa' }
        },
        created:function(){
            bus.$on('aa',function(msg){
                console.log(msg)
            })
        },
        mounted:function(){
          
        }
    }
    
    var routes=[
        {path:'/list',component:list}
    ]
    var router=new VueRouter({  routes:routes })    
    new Vue({
        el:'#app',
        data:{  },
        methods:{
            send:function(){
               bus.$emit('aa','哈哈')
               router.push('/list')
            }
        },
        router
    })
</script>

我在根组件里emit事件但是在list组件监听不到。。。。。。放哪儿都不行啊

阅读 10.9k
4 个回答

应该是其他问题吧,你代码我原封不动复制的,可以监听到

clipboard.png

clipboard.png

clipboard.png

你的根组件没有调用send方法,没发出事件,当然监听不到了啊

第一次点击,没有输出,因为子组件还没创建,第二次点击有输出,子组件创建并且监听到了事件

可以监听到信息,只不过第一次点击的时候不会输出。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题