Vue.jsでコンポーネント間のデータ受け渡しを$onでやっているが、値が受け取れない（$emitイベントは発火している）

Question

com1.vue

Bus.$emit('emotion', this.testvalue)
      console.log('テスト値が送信された')

com2.vue

created: function () {
    console.log('受け取る')
    Bus.$on('emotion', this.setDetail) // 関数の引数に渡されたパラメーターが自動的に渡される
  },
  methods: {
    setDetail: function (value) {
      this.text = value
      console.log('hogehgoeheo' + this.text)
    }
  }

consoleで出力されるのは、
hogehgoeheo[object MouseEvent]です。
この中身のpayloadなどをみれれば値を取れそうですが、そのやり方がわからないのと、正しいやり方では無いと思います。
お助けいただきたいです。

Comments

[TetsuyaZama]

com1.vueで、this.testvalueをconsole.logで出力した際にどんな値が表示されますでしょうか？そこに関しては[object MouseEvent]では無く、ご自分の意図した値になっていることは確認済みでしょうか？

Answer 1

すいません。動作確認せずにひとりごとですが
Busに登録されたsetDeetailの関数内の”this”がCom2ではなくてBusのインスタンスとして迷ってるのでは・・・
thisをselfとかに代入してから直接、

created: function () {
  console.log('受け取る')
  var self = this
  Bus.$on('emotion', function(){
    self.text = value
    console.log('hogehgoeheo' + self.text)
  })
},

なんてどうでしょう