Vue子子组件能否直接向祖父组件触发事件？组件通信疑问

可以实现，但你当前提供的代码存在语法错误，同时还有几种不同的实现方案，下面具体说明：

一、先修正你用$root事件总线的写法 #

你的代码里component1.vue的$on语法有误，修正后可以正常工作：

component1.vue #

<template>
  <component-2 />
</template>

<script>
export default {
  created() {
    // 修正语法：事件名和回调函数之间加逗号，箭头函数补全括号
    this.$root.$on('sort-completed', (updateData) => {
      // 这里处理接收到的事件数据
      console.log('收到子子组件的事件:', updateData)
    })
  },
  beforeUnmount() {
    // 组件销毁时记得解绑事件，防止内存泄漏
    this.$root.$off('sort-completed')
  }
}
</script>

component3.vue #

<template>
  <button @click="doThis">触发事件</button>
</template>

<script>
export default {
  methods: {
    doThis(update) {
      this.$root.$emit('sort-completed', update)
    }
  }
}
</script>

不过这种全局事件总线的方式，容易出现事件名冲突，组件耦合度高，大型项目不建议用。

二、更符合Vue规范的逐层传递事件（单向数据流） #

让component3先把事件传给component2，再由component2转发给component1，职责更清晰：

component3.vue #

<template>
  <button @click="doThis">触发事件</button>
</template>

<script>
export default {
  methods: {
    doThis(update) {
      // 向父组件component2触发事件
      this.$emit('sort-completed', update)
    }
  }
}
</script>

component2.vue #

<template>
  <!-- 直接转发事件给component1 -->
  <component-3 @sort-completed="$emit('sort-completed', $event)" />
</template>

<script>
export default {
  emits: ['sort-completed'] // Vue3推荐声明要触发的事件，提升可读性
}
</script>

component1.vue #

<template>
  <!-- 监听component2转发的事件 -->
  <component-2 @sort-completed="handleSortCompleted" />
</template>

<script>
export default {
  methods: {
    handleSortCompleted(updateData) {
      console.log('收到事件:', updateData)
    }
  }
}
</script>

三、复杂场景用状态管理（Vuex/Pinia） #

如果是大型项目，多组件需要共享状态或通信，用Vuex（Vue2）或Pinia（Vue3）更合适：

component3.vue调用store action #

<script>
export default {
  methods: {
    doThis(update) {
      // 调用store的action修改状态
      this.$store.dispatch('updateSortStatus', update)
    }
  }
}
</script>

component1.vue监听状态变化 #

<script>
export default {
  computed: {
    sortStatus() {
      return this.$store.state.sortStatus
    }
  },
  watch: {
    sortStatus(newVal) {
      // 状态变化时执行逻辑
      console.log('排序状态更新:', newVal)
    }
  }
}
</script>

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