Vue.js-2.5.13更新后created钩子监听事件失效，beforeRouteEnter正常求排查

我来帮你捋清楚这个事件总线的时机问题，这种情况在Vue路由组件里其实挺常见的，咱们一步步来分析：

核心原因分析 #

你遇到的created钩子监听不到事件、但beforeRouteEnter正常的情况，大概率是事件触发时机早于created钩子执行，或者是事件总线实例不唯一导致的：

1. 时机顺序问题：Vue路由组件的钩子执行顺序是beforeRouteEnter（组件实例还未创建）→ created → mounted。如果selected-media事件在table.js的created钩子执行前就被触发了，那组件还没注册监听，自然收不到数据；而beforeRouteEnter是路由进入的第一个钩子，提前注册了监听，所以能捕获到事件。
2. 总线实例不唯一：如果event-bus.js的导出方式不对，导致mediaSelectButton.js和table.js用的不是同一个Vue实例，那事件肯定无法传递。

分步排查与解决 #

1. 先确认事件总线是单例 #

这是最容易踩的坑，务必保证所有组件共用同一个EventBus实例：

// event-bus.js 正确写法
import Vue from 'vue'
export const EventBus = new Vue()

然后在两个组件里都导入这个实例：

// mediaSelectButton.js 和 table.js 里都要这么导入
import { EventBus } from './event-bus'

绝对不能在每个组件里单独new Vue()创建总线，那样会导致监听和触发不在同一个“频道”。

2. 验证事件触发与组件钩子的执行顺序 #

在关键位置加日志，确认谁先执行：

// mediaSelectButton.js 触发事件的地方
selectMedia(mediaData) {
  console.log('触发selected-media事件')
  EventBus.$emit('selected-media', mediaData)
}

// table.js 的created钩子
created() {
  console.log('Table组件created钩子执行')
  EventBus.$on('selected-media', (data) => {
    console.log('收到事件数据:', data)
    // 处理数据逻辑
  })
}

如果日志显示“触发事件”在“created执行”之前，那就是时机问题，需要调整事件触发的时机：

• 如果是页面加载自动触发事件：把触发逻辑放到mounted钩子，或者用Vue.nextTick延迟执行，确保组件已经创建。
• 如果是路由跳转时触发事件：把事件触发放到路由导航完成之后，比如用this.$router.afterEach钩子，或者通过路由参数传递数据（替代事件总线）。

3. 调整created钩子的监听逻辑 #

如果事件确实需要在组件创建前触发，又想在created里处理，可以结合$once监听一次性事件，或者在beforeRouteEnter里把数据暂存下来，再传递给组件实例：

// table.js
data() {
  return {
    cachedMediaData: null
  }
},
beforeRouteEnter(to, from, next) {
  EventBus.$once('selected-media', (data) => {
    next(vm => {
      vm.cachedMediaData = data
    })
  })
},
created() {
  if (this.cachedMediaData) {
    // 直接处理缓存的数据
    this.handleSelectedMedia(this.cachedMediaData)
  }
  // 继续监听后续的事件
  EventBus.$on('selected-media', this.handleSelectedMedia)
},
beforeDestroy() {
  // 记得销毁监听，防止内存泄漏
  EventBus.$off('selected-media', this.handleSelectedMedia)
},
methods: {
  handleSelectedMedia(data) {
    // 你的业务逻辑
  }
}

4. 备选方案：用Vuex替代事件总线 #

如果经常遇到这种跨组件数据传递的时机问题，建议引入Vuex管理状态。把选中的媒体数据存到Vuex的state里，table组件直接从state取数据，完全不用依赖事件总线的时机，代码会更健壮。

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