将键盘事件传递给子组件

Question

看看这个简单的模态组件：

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

  props: ['title'],

});

如何从使用它的组件（父级）控制键盘按下？

如果我使用 @keyup.esc 事件，那么它没有任何效果：

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

如果我将 @keyup.esc 放在 DIV 上的模态内容组件中，那么它就可以工作，但这对我来说没有用，因为我需要调用doSomething父组件中存在的函数

Answer 1

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

要对这些类型的事件做出反应，您必须将侦听器附加到实际组件HTMLElement，而不是 vue 组件。由于这是一个常见问题，vue 提供了一个简单的修饰符，可以自动将事件监听器附加到底层HTMLElement：.native修饰符。

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