Vue 2.0实例没有听到vue-router组件发出的事件

时间:2016-09-14 09:01:32

标签: javascript vue.js vuejs2 vue-router

我正在使用Vue 2.0-rc.6(目前最新版本)和Vue-router 2.0-rc.5(目前最新版本)。

我尝试在我的一个路由器组件中执行this.$emit('custom-event'),在我的Vue实例中尝试this.$on('custom-event', () => { console.log('I heard an event') }),但事件未被侦听。路由器组件本身正在听取事件但不是Vue实例。

有什么想法吗?

查看此jsfiddle

3 个答案:

答案 0 :(得分:18)

来自$ emit的事件不会传播到父实例。 父母必须在模板

中的组件上主动监听它
<router-view @eventname="callbackMethod">

答案 1 :(得分:11)

感谢http://forum.vuejs.org/topic/5235/vue-2-0-instance-is-not-hearing-events-emitted-by-vue-router-components/2中的LinusBorg指出来自$ emit的事件未传播到父实例。

虽然使用LinusBorg建议的解决方案,但我没有使它工作。相反,我通过this.$router.app.$emit('eventname')

开始工作

答案 2 :(得分:1)

使用观察者,我们可以实现相同的目的,这意味着当我的路线更新时,我们可以通过观察者捕获事件。

    watch: {
        '$route': function(to, from) {
              console.log('To :', to.path); // current route
              console.log('To :', from.path); // old route
         }
    }