Vue中this.$emit与this.$root.$emit的使用差异是什么？

1. 事件传播范围完全不同 #

• this.$emit('default-choice', this.choice)：仅在当前组件实例上触发事件，只有直接父组件（通过v-on或@监听该事件的父组件）能捕获到。这是Vue父子组件通信的标准方式，严格遵循组件层级的单向数据流。
• this.$root.$emit('default-choice', this.choice)：在Vue应用的根实例上触发事件，整个应用内所有通过this.$root.$on监听该事件的组件，无论层级关系，都能接收到这个事件。本质是全局事件广播，打破了组件的层级限制。

2. 适用场景天差地别 #

• this.$emit：是父子组件间传递数据、触发行为的首选方案，逻辑清晰，符合Vue组件化的设计原则，后续维护时能快速定位事件的发起方和接收方。
• this.$root.$emit：仅适合跨层级、无直接关联的组件间临时通信（比如兄弟组件、隔代组件）。但要注意，滥用这种方式会导致事件溯源困难，大型项目中更推荐用Vuex、Pinia这类状态管理库，或者专门的事件总线工具来替代。

3. 代码示例对比 #

父子组件通信（用this.$emit）

父组件：

<template>
  <ChildComponent @default-choice="handleChildChoice" />
</template>
<script>
export default {
  methods: {
    handleChildChoice(choice) {
      console.log('子组件传递的选择：', choice);
    }
  }
}
</script>

子组件触发事件：

// 子组件内
this.$emit('default-choice', this.choice);

跨组件全局通信（用this.$root.$emit）

组件A触发全局事件：

// 组件A内
this.$root.$emit('default-choice', this.choice);

组件B监听全局事件：

// 组件B内
mounted() {
  // 监听全局事件
  this.$root.$on('default-choice', (choice) => {
    console.log('全局事件传递的选择：', choice);
  });
},
beforeUnmount() {
  // 组件销毁时解绑事件，避免内存泄漏
  this.$root.$off('default-choice');
}

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