将键盘事件传递给子组件

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

你可以这样做在你的 doSomething 函数中：

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

在你的父组件中这样做：

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

有关更多信息，请查看：

https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

还有这个：

https://medium.com/js-dojo/component-communication-in-vue-js-ca8b591d7efa

Answer 2

使用 refs (Accessing Child Component Instances & Child Elements)

<modal-content @keyup.esc="doSomething" ref="modal">

然后在 doSomething 方法中：

this.$refs.modal.close();

假设您在 modal-content 组件中有一个 close() 方法。

您也可以传递 prop，就像您对 title:

所做的那样

<modal-content @keyup.esc="modalIsOpen = false" :modalIsOpen="modalIsOpen">

Vue.component('modal-content', {
  template: `
      <div class="modal" :class="{show: modalIsOpen}">
         ...
      </div>
  `,
  props: ['title' 'modalIsOpen'],
  //...
});

Answer 3

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

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

像这样尝试

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

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

将键盘事件传递给子组件

Pass keyboard events to child component

javascript

keyboard-events

vue.js

像这样尝试