如何在Vue3中将键盘事件传播到父级

在我的Vue 3应用程序中，我有五层深的嵌套组件。顶级组件TopCom和底层组件MostInerCom都有一个@keydown处理程序。

如果MostInnerCom有焦点，并且按下了MostInerCom无法处理的键，则该事件应由TopCom处理。如何做到这一点？

我使用嵌套的div而不是嵌套的组件创建了一个非常简单的演示。请在codepen中查看此小演示。

以下是不起作用的相关代码片段：

Vue.createApp({
setup() {
const keycode = Vue.ref('')

function onKeydownForApp(e) {
keycode.value = '***'
}

function onKeydownForButton(e) {
if (e.code === 'KeyA') {
parent.dispatchEvent(new KeyboardEvent(e.type, e))
} else {
keycode.value = e.code
}
}
return {
keycode,
onKeydownForApp,
onKeydownForButton
}
}
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<main id="app">
<div @keydown="onKeydownForApp" tabindex="-1">
<input type=text>
<div>
<button @keydown.stop="onKeydownForButton">- K -</button>
keycode={{keycode}}
</div>
</div>
</main>