Vue中this.$root.$emit失效：根组件监听自定义事件无响应

我碰到过好几次类似的问题，大概率是下面几个原因之一，咱们一个个排查：

1. 事件触发时机早于监听时机 #

这是最常见的坑！如果孙组件在根组件还没完成监听注册的时候就触发了$emit，那此时根组件的$on还没挂上，自然收不到事件。

举个典型的场景：

• 孙组件在created钩子就急着发事件：

  // 孙组件
  created() {
    this.$root.$emit('access-token', 'my-token');
  }
  

• 根组件却在mounted才注册监听：

  // 根组件
  mounted() {
    this.$on('access-token', this.setAccessToken);
  }
  

Vue的生命周期顺序是：父组件created → 子组件created → 子组件mounted → 父组件mounted。根组件的mounted是最后执行的，孙组件的created早就把事件发出去了，这时候监听还没到位。

解决办法：

• 把孙组件的事件触发延迟到mounted之后，或者用$nextTick确保实例初始化完成：

  // 孙组件
  mounted() {
    this.$nextTick(() => {
      this.$root.$emit('access-token', 'my-token');
    });
  }
  

• 或者把根组件的监听移到更早的created钩子：

  // 根组件
  created() {
    this.$on('access-token', this.setAccessToken);
  }
  

2. $root的指向不是你以为的根组件 #

有时候如果你的应用里存在嵌套的Vue实例（比如用Vue.extend创建的子实例，或是某些UI框架自带的独立实例），孙组件的this.$root可能指向的是中间某个实例，而非顶层的根组件。

排查方法：
在孙组件里打印console.log(this.$root)，再在根组件里打印console.log(this)，对比两个实例是不是同一个对象。如果不一样，说明$root指向错了。

解决办法：

• 确保整个应用只有一个根Vue实例；
• 更靠谱的方式是用provide/inject传递监听函数，或者直接用Vuex/Pinia这类状态管理工具来传递token（这其实是更推荐的方案，比$root事件更稳定）。

3. 你用的是Vue3，而$on/$emit已经被移除了 #

Vue3彻底废除了实例上的$on、$off、$once方法，不再支持这种事件总线的用法。如果你用的是Vue3，这套写法肯定不管用。

解决办法：

• 自定义事件总线：

  // eventBus.js
  export const eventBus = new EventTarget();
  
  // 孙组件里触发
  eventBus.dispatchEvent(new CustomEvent('access-token', { detail: 'my-token' }));
  
  // 根组件里监听
  mounted() {
    eventBus.addEventListener('access-token', (e) => {
      this.setAccessToken(e.detail);
    });
  }
  

• 更推荐用Pinia来管理token状态，直接在孙组件里修改状态，根组件监听状态变化即可。

4. 事件名称拼写错误 #

虽然你给出的例子里是一致的，但实际代码里可能不小心写错了大小写、符号，比如把'access-token'写成了'accessToken'，或者多了个空格。

排查方法：
在孙组件触发事件时打印事件名称和参数，在根组件注册监听时也打印事件名称，确保完全一致。

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