Vue如何简化中间组件对子组件事件的向上转发代码？

场景说明 #

我有一个InnerCompo.vue组件，点击按钮会触发something-happened事件；该组件被OuterComp.vue引用，但OuterComp本身不需要处理这个事件，而是要转发给上层的App.vue。目前我通过监听事件后重新触发的方式实现转发，但需要编写冗余代码，想知道有没有更简洁的实现方式（比如类似@something-happened.direct-forward的语法）。

原组件代码 #

InnerCompo.vue

<template>
  <v-btn @click="emit('something-happened')">Click me</v-btn>
</template>

<script setup lang="ts">
const emit = defineEmits<{ (e: 'something-happened'): void }>()
</script>

OuterComp.vue（原实现）

<template>
  <inner-comp @something-happened="onSomethingHappened" />
</template>

<script setup lang="ts">
import InnerComp from "./InnerComp.vue";
  
const emit = defineEmits<{ (e: 'something-happened'): void }>()

function onSomethingHappened() {
  emit("something-happened");
}
</script>

App.vue

<template>
  <v-app>
    <v-main>
      <outer-comp @something-happened="onSomethingHappened" />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import OuterComp from "./OuterComp.vue";

function onSomethingHappened() {
  console.log("something happened");
}
</script>

简化方法 #

方法1：模板内直接调用emit（单个事件）

不需要单独定义处理函数，直接在模板中转发事件，减少script部分的冗余代码：

<template>
  <inner-comp @something-happened="emit('something-happened')" />
</template>

<script setup lang="ts">
import InnerComp from "./InnerComp.vue";
  
const emit = defineEmits<{ (e: 'something-happened'): void }>()
</script>

方法2：批量转发多个事件（多事件场景）

如果需要转发多个事件，可利用v-bind="$attrs"批量处理，同时保留TypeScript类型支持：

<template>
  <inner-comp v-bind="$attrs" />
</template>

<script setup lang="ts">
import InnerComp from "./InnerComp.vue";
  
// 需定义所有要转发的事件类型以支持TypeScript检查
const emit = defineEmits<{ 
  (e: 'something-happened'): void,
  // 可添加其他需要转发的事件类型
}>()
</script>

说明 #

Vue原生并没有类似@something-happened.direct-forward的内置修饰符，但通过上述两种方法可以有效减少事件转发的冗余代码，同时保留TypeScript的类型校验能力。

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