Vue - не родительское детское общение

Question

При чтении документа Vue Номера для родительского общения
Для практики я попытался построить пример, чтобы увидеть, работает ли он, ниже приведен мой код:
Я построил два компонента и попытался использовать шину экземпляра Vue для передачи сообщения от dudi-station к dudo-station во время нажатия, но это не работает.
Кто-нибудь может помочь? Спасибо!

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

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

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

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

Answer 1

Потому что в этом утверждении: bus.$on('callout', function(value) { this.dudoMsg = value; это не значит твой вью инстанс. Вам нужно использовать функцию стрелки, чтобы убедиться, что 'this' означает экземпляр vue. Как ниже:

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

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

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

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

Answer 2

Используйте стрелочную функцию в качестве обработчика событий при получении сообщения в компоненте от другого компонента. Это поможет вам с объемом ключевого слова "это".

bus.$on('callout', function(value) {
        this.dudoMsg = value;
      console.log(value)
    });

вместо этого используйте его, как показано ниже

bus.$on('callout', (value) => {
        this.dudoMsg = value;
      console.log(value)
    });