Передача событий клавиатуры дочернему компоненту - PullRequest
Новая
       65

Передача событий клавиатуры дочернему компоненту

0 голосов
/ 22 сентября 2019

См. Этот простой модальный компонент: 

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функция, которая существует в родительском компоненте

Ответы [ 3 ]

3 голосов
/ 22 сентября 2019

Вы можете сделать что-то подобное в вашей функции 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

1 голос
/ 23 сентября 2019

Причина, по которой ваш код не работает, заключается в том, что вы пытаетесь прослушать собственное событие браузера - которое не выдается Vue, а самим DOM.

Чтобы реагировать на события такого типаВы должны прикрепить слушателя к фактическому HTMLElement, а не к компоненту vue.Поскольку это распространенная проблема, vue предоставляет простой модификатор, который автоматически присоединяет обработчик событий к базовому HTMLElement: модификатору .native.

Попробуйте это так 

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

Выдополнительную информацию можно найти в документах

1 голос
/ 22 сентября 2019

Использовать ссылки ( Доступ к дочерним экземплярам компонентов и дочерним элементам ) 

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

, а затем в методе doSomething:

this.$refs.modal.close();

при условии, что у вас есть метод close() в компоненте модального содержимого.

Вы также можете передать проп , как вы делаете с title:

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

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