Javascript 将键盘事件传递给子组件

请参见此简单模态组件：

Vue.component('modal-content', {
  template: `
      <div class="modal">
         ...
      </div>
  `,

  props: ['title'],

});

Vue.component（'modal-content'{
模板：`
...
`,
道具：['title']，
});

如何从使用它的组件（家长）控制键盘按键

如果我使用@keyup.esc事件，则它不会产生任何影响：

<portal to="modal-wrap">
  <modal-content @keyup.esc="doSomething">
  </modal-content>
</portal> 

---

如果我把@keyup.esc放在DIV的modal content组件中，它就会工作，但这对我没有用，因为我需要调用父组件中存在的

doSomething

函数 在剂量测量功能中：

onClickButton (event) {
      this.$emit('clicked', 'someValue')
}

在父组件中，请执行以下操作：

<template>
   <parent-component @clicked="handleClick"></parent-component>
</template>

有关更多信息，请查看以下内容：

这是：

---

你可以这样做 在剂量测量功能中：

onClickButton (event) {
      this.$emit('clicked', 'someValue')
}

在父组件中，请执行以下操作：

<template>
   <parent-component @clicked="handleClick"></parent-component>
</template>

有关更多信息，请查看以下内容：

这是：

使用参考文献

使用参考文献

---

代码无法工作的原因是，您正在尝试侦听本机浏览器事件，该事件不是由Vue发出的，而是由DOM本身发出的

要对这些类型的事件做出反应，您必须将侦听器附加到实际的

HTMLElement

——而不是vue组件。由于这是一个常见问题，vue提供了一个简单的修饰符，可以自动将eventlistener附加到基础的

HTMLElement

：即

.native

修饰符

像这样试试

---

您可以在Vue中找到更多信息。您的代码无法工作的原因是您正在尝试侦听本机浏览器事件，该事件不是由Vue发出的，而是由DOM本身发出的

要对这些类型的事件做出反应，您必须将侦听器附加到实际的

HTMLElement

——而不是vue组件。由于这是一个常见问题，vue提供了一个简单的修饰符，可以自动将eventlistener附加到基础的

HTMLElement

：即

.native

修饰符

像这样试试

---

您可以在vues中找到更多信息

您假设我只需要Esc来关闭它，但我还想挂起其他键，如Enter，并将它们分配给模式中的不同按钮。然后，对于发送不同事件的不同操作，您假设我只需要Esc来关闭它，但我还想挂起其他键，如Enter，然后为不同的操作发送不同的事件

<portal to="modal-wrap">
  <modal-content @keyup.esc.native="doSomething">
  </modal-content>
</portal>