Vue3+el-menu 递归 emit失效

背景：添加快捷菜单功能，用到了递归组件。在最后一层添加按钮，点击时触发emit，在父组件中监听自定义事件。但自定义事件未执行。

代码：

// 父组件
<el-menu><quick-menu-item v-for="routes in menuList" :key="routes.id" :item="routes" @clickBtn="getItem" />
</el-menu>const getItem = item => {console.log('getItem', item)
}// 子组件 QuickMenuItem.vue
<template><el-sub-menu v-if="props.item?.children?.length" :index="props.item.id"><template #title> {{ props.item.name }}</template><quick-menu-itemv-for="child in props.item?.children":key="child.id" :item="child" /></el-sub-menu><el-menu-item v-else>{{ props.item.name }}<el-button link @click="clickBtn(props.item)">点击</el-button></el-menu-item>
</template>const emit = defineEmits(['clickBtn'])
const clickBtn = item => {emit('clickBtn', item)
}

首先，如上述代码，直接emit，getItem() 方法并未执行。

其次，借鉴了 vue2 递归组件中，加 v-on="$listeners"，可实现功能。vue3 $listeners 被移除，合并到$attrs身上。做了如下尝试：

<quick-menu-item 
    v-for="child in props.item?.children" 
    :key="child.id" 
    :item="child" 
    v-bind="$attrs" 
/>

然而很遗憾，同样未执行getItem() 方法。

最后，直到看到有个回答说直接写，直接写？

<quick-menu-item v-for="child in props.item?.children":key="child.id":item="child" @clickBtn="clickBtn"
/>

 结果，getItem() 方法 成功执行。事情解决。

思考：如果有多个事件需要触发，有没有更好的方式？而非直接添加多个事件方式？

The end.