Vue 2.0实例未侦听vue路由器组件发出的事件

Question

我使用的是Vue 2.0-rc.6 (目前最新)和Vue-router2.0-rc.5(目前最新)。

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

有什么想法吗？

看看这个jsfiddle。

Answer 1

感谢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')来实现它

Answer 2

来自$emit的事件不会传播到父实例。父级必须在模板中的组件上主动侦听它。

<router-view @eventname="callbackMethod" />

Answer 3

使用watcher我们可以实现同样的事情，这意味着当我的路由更新时，我们可以通过watcher捕获事件。

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