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

【问题标题】：How to propagate keyboard event to parent in Vue 3?如何在 Vue 3 中将键盘事件传播给父级？
【发布时间】：2022-01-13 12:13:26
【问题描述】：

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

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

我创建了一个使用嵌套 div 而不是嵌套组件的非常简单的演示。请参阅this small demo in codepen。

这里是相关代码sn-p，不起作用：

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>

【问题讨论】：

您尝试添加@keydown.stop.self 吗？
@DengSihan，到底怎么样？如果我将@keydown.stop 替换为@keydown.stop.self，问题仍然存在。

标签： vue.js vuejs3

【解决方案1】：

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

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

【讨论】：