web-dev-qa-db-ja.com

Vue 2.0インスタンスは、vue-routerコンポーネントによって発行されたイベントを聞いていません

Vue 2.0-rc.6（現時点で最新））およびVue-router 2.0-rc.5（現時点で最新）を使用しています。

ルーターコンポーネントの1つでthis.$emit('custom-event')を実行しようとしましたが、Vueインスタンスでthis.$on('custom-event', () => { console.log('I heard an event') })を実行しようとしましたが、イベントはリッスンされていませんでした。ルーターコンポーネントそれ自体はイベントを聞いていましたが、Vueインスタンスではありませんでした。

何か案が？

これをチェックしてください jsfiddle 。

javascriptvue.jsvuejs2vue-router
15
Yapp Ka Howe

http://forum.vuejs.org/topic/5235/vue-2-0-instance-is-not-hearing-events-emitted-by-vue-routerのLinusBorgに感謝-components/2 は、$ emitからのイベントが親インスタンスに伝播されないことを示します。

LinusBorgによって提案されたソリューションを使用しても、私はそれを動作させませんでした。代わりに、this.$router.app.$emit('eventname')を実行して機能させました

10
Yapp Ka Howe

$ emitからのイベントは親インスタンスに伝播されません。親はテンプレートのコンポーネントでそれを積極的にリッスンする必要があります

<router-view @eventname="callbackMethod">
19
DannyFeliz

ウォッチャーを使用して同じことを達成できます。つまり、ルートが更新されると、ウォッチャーを介してイベントをキャッチできます。

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