Vue单击事件未正确发送到div答案

【问题标题】：Vue click event not emitting properly to divVue单击事件未正确发送到div
【发布时间】：2021-12-30 14:30:14
【问题描述】：

如代码所示，我想获得一个点击事件来触发弹出'add-day-form'，它是一个组件。但是通过将 @click="showModal = true" 放在包装 div 中，当弹出窗口出现时，我似乎无法按下发出关闭事件的关闭按钮。如果我将@click="showModal = true" 放在font-awesome-icon 上，我只会关闭它。该组件在这两种情况下都会出现，但关闭事件似乎只在它不在我想要的外部 div（plusContainer）中时才起作用

*edit：如果我在 plusContainer 上监听 dblclick 事件，似乎一切正常，但现在我必须双击打开不理想的组件

我从他们的网站https://vuejs.org/v2/examples/modal.html复制了 vue 弹出模式

这里是 app.vue

<template>
   <div class="plusContainer" @click="showModal = true">
       <font-awesome-icon style="color: white" class="fa-sm" icon="plus" />
       <add-day-form v-if="showModal" @close="showModal = false" />
   </div>
</template>

<script>
import addDayForm from "./addDayForm.vue";
import dayView from "./dayView.vue";
export default {
   components: {
       addDayForm,
       dayView,
   },
   data() {
       return {
           showModal: false,
       };
   },
};
</script>

这里是表单组件

<template>
    <div class="notifContainer">
        <div class="heading">
            <h2 id="title">Dayy</h2>
        </div>
        <button @click="$emit('close')">Close</button>
        <!-- <day-view></day-view> -->
    </div>
</template>
<script>
export default {};
</script>

【问题讨论】：

你可以尝试在字体真棒图标上添加pointer-events: none
似乎不起作用@CornelRaiu

标签： javascript laravel vue.js vuejs2

【解决方案1】：

看起来点击事件正在传播到plusContainer，所以它会关闭然后立即再次打开。

您可以尝试在表单组件上执行：@click.stop="$emit('close')"：

<template>
    <div class="notifContainer">
        <div class="heading">
            <h2 id="title">Dayy</h2>
        </div>
        <button @click.stop="$emit('close')">Close</button>
        <!-- <day-view></day-view> -->
    </div>
</template>
<script>
export default {};
</script>

【讨论】：