Vue - nicht Eltern-Kind-Kommunikation

Question

Wenn Vue Dokument Non parent-child communication
Für die Praxis zu lesen, habe ich versucht, ein Beispiel zu bauen, um zu sehen, ob es funktioniert, unten ist mein Code:
Ich baue zwei Komponenten und versuchte Vue Instanz Bus zu benutzen um die Nachricht von der Dudi-Station zur Dudo-Station zu transportieren, während es auf einem Klick ist, aber es funktioniert nicht.
Kann jemand helfen? Vielen Dank!

Vue.component('dudi-station', { 
 
\t template: '<div @click="sentMsg">{{dudiMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudiMsg: 'Dudi!!', 
 
    } 
 
    }, 
 
    methods: { 
 
    \t sentMsg: function() { 
 
    \t bus.$emit('callout', this.dudiMsg); 
 
    }, 
 
    } 
 
}); 
 

 
Vue.component('dudo-station', { 
 
\t template: '<div>{{dudoMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudoMsg:'', 
 
    } 
 
    }, 
 
\t created: function() { 
 
    \t bus.$on('callout', function(value) { 
 
    \t this.dudoMsg = value; 
 
     console.log(value) 
 
    }); 
 
    } 
 
}); 
 

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

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <dudi-station></dudi-station> 
 
    <dudo-station></dudo-station> 
 
</div>

Answer 1

Da in dieser Aussage: bus.$on('callout', function(value) { this.dudoMsg = value; diese diese ist bedeutet nicht, Ihre vue Instanz. Sie müssen die Pfeilfunktion verwenden, um sicherzustellen, dass "dies" die Vue-Instanz bedeutet. unten wie:

Vue.component('dudi-station', { 
 
\t template: '<div @click="sentMsg">{{dudiMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudiMsg: 'Dudi!!', 
 
    } 
 
    }, 
 
    methods: { 
 
    \t sentMsg: function() { 
 
    \t bus.$emit('callout', this.dudiMsg); 
 
    }, 
 
    } 
 
}); 
 

 
Vue.component('dudo-station', { 
 
\t template: '<div>{{dudoMsg}}</div>', 
 
\t data: function() { 
 
    \t return { 
 
    \t dudoMsg:'', 
 
    } 
 
    }, 
 
\t created: function() { 
 
    \t bus.$on('callout',value => { 
 
    \t this.dudoMsg = value; 
 
     console.log(value) 
 
    }); 
 
    } 
 
}); 
 

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

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <dudi-station></dudi-station> 
 
    <dudo-station></dudo-station> 
 
</div>