Vue全局事件总线创建问题：Node/Webpack/Vue Router环境下$bus undefined

我来帮你排查下问题所在，主要有两个关键点需要修正：

1. 生命周期钩子使用箭头函数导致this指向错误 #

你的App.vue里created用了箭头函数，这会导致this不指向Vue组件实例，而是外部的上下文（通常是window），所以自然拿不到this.$bus。这是Vue开发中很容易踩的坑！

修正App.vue的created钩子：

<script>
export default {
  name: 'App',
  // 把箭头函数改成普通函数
  created() {
    console.log(this.$bus); // 现在this指向组件实例了
  }
}
</script>

2. 全局事件总线的初始化问题 #

接下来针对你尝试的两种写法分别修正：

写法一：基于$root的事件总线 #

你之前的代码只定义了$bus的getter，但根Vue实例里根本没有初始化bus属性，所以this.$root.bus是undefined。需要在根实例中先创建bus实例：

修正后的main.js：

// 定义全局$bus访问器
Object.defineProperty(Vue.prototype, '$bus', { 
  get () { 
    return this.$root.bus 
  } 
})

// 创建根Vue实例时初始化bus
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  created() {
    // 在根实例上挂载bus实例
    this.bus = new Vue()
  }
})

写法二：直接挂载到Vue原型 #

这种写法本身是可行的，只要修正了App.vue的箭头函数问题，就能正常访问this.$bus。确认你的main.js代码如下：

main.js代码：

// 创建事件总线实例并挂载到Vue原型
const eventBus = new Vue()
Vue.prototype.$bus = eventBus

// 根实例正常创建
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

验证方法 #

修正后，启动项目，打开控制台，应该能看到打印出Vue实例对象（也就是你的事件总线），之后就可以正常使用this.$bus.$emit和this.$bus.$on来传递事件了。

内容的提问来源于stack exchange，提问作者fswebb