如何在 Vue 3 中将键盘事件传播给父级？

Question

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

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

我使用嵌套 div 而不是嵌套组件创建了一个非常简单的演示。请参阅 this small demo in 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>

Answer 1

全局变量parent引用window.parent，即父文档，而不是父HTML元素。一种解决方案是向按钮周围的 div 添加一个 id 属性，例如<div id="parentDiv"> 然后让 parent 参考这个 div:

var parent = document.getElementById('parentDiv');

如何在 Vue 3 中将键盘事件传播给父级？

How to propagate keyboard event to parent in Vue 3?

vue.js

vuejs3