Vue.js globales Ereignis funktioniert nicht

Question

Ich habe

<component-one></component-one> 

<component-two></component-two> 
     <component-three></component-three> 

Komponente two enthält Komponente three.

Zur Zeit habe ich emit ein Ereignis in <component-one>, das in <component-three> gefangen werden muss.

In <component-one> Ich schieße das Ereignis wie folgt aus:

this.$bus.$emit('setSecondBanner', finalBanner); 

Dann in <component-three> ich es so fangen:

mounted() { 
    this.$bus.$on('setSecondBanner', (banner) => { 
     alert('Caught'); 
     this.banner = banner; 
    }); 
}, 

Aber das Ereignis nie caught!

definiere ich den Bus wie folgt aus (in meinem core.js):

let eventBus = new Vue(); 

Object.defineProperties(Vue.prototype, { 
    $bus: { 
     get:() => { return eventBus; } 
    } 
}); 

Was hier falsch sein könnte? Wenn ich vue-dev-tools überprüfe, kann ich sehen, dass das Ereignis gefeuert hat!

Answer 1

Dies ist das Arbeitsbeispiel für vue1.

Object.defineProperty(Vue.prototype, '$bus', { 
 
\t get() { 
 
\t \t return this.$root.bus; 
 
\t } 
 
}); 
 

 
Vue.component('third', { 
 
\t template: `<div> Third : {{ data }} </div>`, 
 
    props:['data'] 
 
}); 
 

 
Vue.component('second', { 
 
\t template: `<div>Second component <third :data="data"></third></div>`, 
 
\t ready() { 
 
\t \t this.$bus.$on('setSecondBanner', (event) => { 
 
\t \t \t this.data = event.data; 
 
\t \t }); 
 
\t }, 
 
\t data() { 
 
\t \t return { 
 
    \t data: 'Defautl value in second' 
 
    } 
 
\t } 
 
}); 
 

 
Vue.component('first', { 
 
\t template: `<div>{{ data }}</div>`, 
 
\t ready() { 
 
\t \t setInterval(() => { 
 
\t \t \t this.$bus.$emit('setSecondBanner', { 
 
\t \t \t \t data: 'Bus sending some data : '+new Date(), 
 
\t \t \t }); 
 
\t \t }, 1000); 
 
\t }, 
 

 
\t data() { 
 
\t \t return { 
 
    \t data: 'Defautl value in first' 
 
    } 
 
\t } 
 
}); 
 

 
var bus = new Vue({}); 
 
new Vue({ 
 
\t el: '#app', 
 
\t data: { 
 
\t \t bus: bus 
 
\t } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script> 
 
<div id="app"> 
 
    <second></second> 
 
    <first></first> 
 
</div>

Answer 2

Haben Sie versucht, den Listener unter created statt mounted zu registrieren?

Auch definieren, warum der Bus mit defineProperties und nicht einfach:

Vue.prototype.$bus = new Vue();