防止子元素接收点击事件不起作用

Question

我正在尝试创建一个模态组件，并在单击组件外部时将其关闭。这是我当前的设置：

1. 在元素上设置单击事件的身份验证div组件：

    <template>   <div>
        <transition name="modal">
          <div class="modal-mask" @click="$parent.$emit('close')">
            <div class="modal-wrapper">
              <div class="modal-container">
                <div class="modal-header">
                  <slot name="header">Default Header</slot>
                </div>
                <div class="model-body">
                  <slot name="body">Default Body</slot>
                </div>
                <div class="modal-footer">
                  <slot name="footer">Default Footer</slot>
                </div>
              </div>
            </div>
          </div>
        </transition>   </div> </template>

2. 注入必要信息的SignIn组件：

<template>
  <div>
    <Auth />
  </div>
</template>

3. 使用 SignIn 组件的Home组件：

<template>
  <div class="home">
    <SignIn v-if="showModal" @close="showModal = false" />
  </div>
</template>

现在，当我在模式之外单击时，它的行为正常，该close事件被调用。
但当我在模态中单击时也会调用它。

不是我尝试使用@click.self，但现在即使在模式之外单击，它也不再起作用。

      <div class="modal-mask" @click.self="$parent.$emit('close')">

我目前正在学习VueJs，但我不明白这是如何工作的。我认为self会阻止将单击事件传播到子元素，仅此而已。

有人知道发生了什么事吗？

PS：我正在使用此设置，因为我想使用身份验证组件进行登录和注册。

Answer 1

要么需要<div class="modal-wrapper">​<div class="modal-container">@click.prevent.stop

<template>

   <div>

        <transition name="modal">

          <div class="modal-mask" @click="$parent.$emit('close')">

            <div class="modal-wrapper">

              <div class="modal-container" @click.prevent.stop>

                <div class="modal-header">
                  <slot name="header">Default Header</slot>
                </div>

                <div class="model-body">
                  <slot name="body">Default Body</slot>
                </div>

                <div class="modal-footer">
                  <slot name="footer">Default Footer</slot>
                </div>

              </div>

            </div>

          </div>

        </transition>

    </div>

</template>