Vue.js中$emit与$root.$emit的区别及适用场景

this.$emit('newComment', this.commentId) #

• 核心是局部父子组件通信，事件仅在当前组件和它的直接父组件之间传递
• 适用场景：
  • 组件层级浅，且只有直接父组件需要响应事件的场景。比如子组件是评论输入框，父组件是文章详情页，子组件提交评论后仅需通知父组件刷新评论列表，用这个方式最合适。父组件只需在子组件标签上通过@newComment="处理方法"就能监听事件。
  • 特点：事件范围精准，不会干扰无关组件，符合Vue组件化解耦的设计思路，后续维护更清晰。

this.$root.$emit('newComment', this.commentId) #

• 核心是全局跨层级通信，事件挂载在根组件实例上，所有组件都能监听响应
• 适用场景：
  • 组件层级很深（如孙子、曾孙组件），或者完全不相关的组件需要同步响应同一个事件的场景。比如深层的评论回复组件提交后，既要让最外层的文章页更新数据，还要让侧边栏的通知组件弹出提示，用全局事件可以直接穿透层级完成通知。
  • 注意：这种方式属于全局广播，滥用会导致组件间耦合度升高，后期难以追踪事件的触发和监听关系。如果是频繁的全局状态变更场景，更推荐用Vuex或Pinia这类状态管理工具，比全局事件更可控。

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