EventBus в VueJS не работает

Question

Я пытаюсь узнать о eventBus, и я создал 2 компонента для этого Hello.vue и User.vue.

Привет

<template>
  <button @click="emitGlobalClickEvent()">Click me</button>
</template>


<script>
import { eventBus } from '../main'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    emitGlobalClickEvent () {
      eventBus.$emit('messageSelected', this.msg)
    }
  }
}
</script>

пользователь

import { eventBus } from '../main';

eventBus.$on('messageSelected', msg => {
    console.log(msg);
})

главный

import Vue from 'vue'
import App from './App'
import router from './router'

export const eventBus = new Vue()

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Когда я нажимаю на кнопку, я ничего не вижу в журнале консоли и не получаю никаких ошибок.

Я сделал что-то не так или мне нужно добавить что-то еще для работы?

Answer 1

Я видел, что твой код неполон. Вот почему вы ничего не видите, когда нажимаете на кнопку.

Я надеюсь, что мой код поможет вам понять EventBus и где вы допустили ошибки в вашем коде.

Попробуйте этот код: Hello.vue

<template>
  <div>
    <h2>This is Hello component</h2>
    <button 
      @click="emitGlobalClickEvent()">Click me</button>
  </div>
</template>
<script>
import { eventBus } from '../main'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    emitGlobalClickEvent () {
      eventBus.$emit('messageSelected', this.msg)
    }
  }
}
</script>

User.vue

<template>
  <div>
    <h2>This is User component</h2>
    <user-one></user-one>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  import UserOne from './UserOne.vue'
  export default {
    created () {
      eventBus.$on('messageSelected', msg => {
        console.log(msg)
      })
    },
    components: {
      UserOne
    }
  }
</script>

UserOne.vue

<template>
  <div>
      <h3>We are in UserOne component</h3>
      <user-two></user-two>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  import UserTwo from './UserTwo.vue'
  export default {
    created () {
      eventBus.$on('messageSelected', msg => {
        console.log('From UserOne message !!!')
      })
    },
    components: {
      'user-two': UserTwo
    }
  }
</script>

UserTwo.vue

<template>
  <div>
    <h4>We are in UserTwo Child component</h4>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  export default {
    created () {
      eventBus.$on('messageSelected', msg => {
        console.log('From UserTwo message!')
      })
    }
  }
</script>

Я создал другое сообщение в консоли, чтобы увидеть разницу для всех компонентов, но если вы введете msg во все $on, в консоли вы получите то же сообщение.