如何处理Vue3中的“Vue3”事件？

Question

我有一个<Parent>组件，如果变量showModal为真，则呈现showModal组件。

变量showModal是在<Parent>组件的setup(){}函数中定义的。

当用户：

1. 单击关闭按钮
2. 当他们按下ESC按钮时

父组件

<template>
  <Modal v-if="isShownModal" @clickedModalClose="isShownModal=false" @keydown.esc="isShownModal=false">
  //removed some code for clarity purposes
</template>

<script>
export default {
  components: {Modal},
  setup(){

    const isShownModal = ref(false)
    ...

注意@clickedModalClose="isShownModal=false"和@keydown.esc="isShownModal=false"

模态元件

<template>

  <div class="modal is-active">
    <div class="modal-background"></div>  
    
    <div class="modal-content box">
      <slot name="header"></slot>
      <slot name="body"></slot>  
    </div>
  
    <!-- Listen to a custom event @clicked-modal-close (v-on) --> 
    <button @click="$emit('clickedModalClose')" class="modal-close is-large" aria-label="close"></button>
  </div>
  
</template>

要关闭该模式，我将在子组件中单击“关闭”按钮并侦听该事件@clickedModalClose，并按预期正确关闭该模式时发出一个事件。

尽管如此，当我按下ESC按钮时，即使我在Modal组件上声明了事件处理程序：<Modal v-if="isShownModal" @clickedModalClose="isShownModal=false" @keydown.esc="isShownModal=false">，也不会发生任何事情。

我还尝试将@keydown.esc="closeTheModal()"附加到<Modal>中的DIV和template标记，然后在closeTheModal()函数中以编程方式发出clickedModalClose事件，但没有成功。

请找个人来解释一下这个问题好吗？

更新

正确的答案由@blackgreen给出。

在呈现组件之后，为了处理ESC事件，必须将该事件附加到组件中的DOM元素。

我所做的就是简单地使用Modal关闭按钮上的模板引用，使其在onMounted(){}钩子中可用，并在其上调用focus()方法。

父组件

<Modal @keydown.esc="isShownModal=false">

子组件

<template>
<button ref="closingButton" class="modal-close is-large" aria-label="close"></button>
</template>

在JS部分：

<script>
import {ref, onMounted} from 'vue';
export default {
  setup(props, context){
    
    const closingButton = ref(null)
    onMounted(()=>{
      closingButton.value.focus()
    })

    return {closingButton}

  }
}

Answer 1

绑定@keydown.esc是正确的(示范性小提琴)。

但是，如果要实际触发事件，则声明侦听器的元素必须处于焦点位置。

在这把小提琴示例中，mounted钩子使用tabindex=0设置<div>元素的焦点(使其具有焦点)。如果在该div聚焦时按Esc，您将看到计数器也在递增。