Vue3自定义事件传播异常：为何部分场景无法向上冒泡？

安全阿岳

2026-6-18

Vue3自定义事件传播差异疑问

场景说明

参考相关代码示例时，子组件触发的自定义事件可正常向上传递至根组件
但当中间组件（Comp2）自身存在$emit调用时，子组件（Comp1）触发的自定义事件无法继续向上传播到根组件。尝试显式设置inheritAttrs: true、将事件添加至emits数组均无效，仅通过重新emit不同名称的事件可解决问题，但这种方式不符合直觉且不够优雅。即使在Comp2中监听Comp1的事件用于调试，也不会改变事件无法传播的结果。

无法正常运行的代码示例

JavaScript代码

const Comp1 = {
  template: `
    <button @click="this.$emit('inner-event')">click me (inner)</button>
  `
}

const Comp2 = {
  components: {
    Comp1
  },
  emits: [
    "inner-event",
    "middle-event",
  ],
  template: `
  <div>
    <Comp1 @inner-event="console.log('at least it ended up here')"/>
    <button @click="this.$emit('middle-event')">other (middle)</button>
  </div>
  `,
  inheritAttrs: true 
}

const HelloVueApp = {
  components: {
    Comp2
  },
  methods: {
    log() {
      console.log("event handled APP");
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>

<div id="hello-vue" class="demo">
  <Comp2 @inner-event="log" @middle-event="log"/>
</div>