Vue.js 停止事件侦听器在Vue中列出子元素

我正在Vue中创建一个模式，我希望在用户单击内部模式容器外部时能够关闭该模式。问题是，当我在单击时将事件侦听器添加到父元素时，所有子元素也会在单击时触发该事件侦听器

我在下面创建了一个简单的演示来演示我的问题。如果用户单击父元素的黑色部分，模态应该关闭，但是子元素包含的空白应该不能触发关闭功能

newvue({
el:'模态'，
数据：{
主动：对，
},
方法：{
closeModal（）{
this.active=false
}
}
})

.modal{
显示：无；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
证明内容：中心；
对齐项目：居中；
背景色：黑色；
}
.modal.active{
显示器：flex；
}
.模态内容{
宽度：200px；
高度：200px；
填充：1rem；
背景色：白色；
}

此子元素应无法在单击时关闭模态。

我赞同kimy82的回答。使用。代码段已更新

newvue({
el:'模态'，
数据：{
主动：对，
},
方法：{
关闭模式（事件）{
this.active=false
}
}
})

.modal{
显示：无；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
证明内容：中心；
对齐项目：居中；
背景色：黑色；
}
.modal.active{
显示器：flex；
}
.模态内容{
宽度：200px；
高度：200px；
填充：1rem；
背景色：白色；
}

此子元素应无法在单击时关闭模态。

我赞同kimy82的回答。使用。代码段已更新

newvue({
el:'模态'，
数据：{
主动：对，
},
方法：{
关闭模式（事件）{
this.active=false
}
}
})

.modal{
显示：无；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
证明内容：中心；
对齐项目：居中；
背景色：黑色；
}
.modal.active{
显示器：flex；
}
.模态内容{
宽度：200px；
高度：200px；
填充：1rem；
背景色：白色；
}

此子元素应无法在单击时关闭模态。

单击事件处理程序有事件修饰符

---

单击事件处理程序有事件修饰符

您可以试试 v-on:click.self=。。。 仅当目标元素为自身时才应触发。 希望对您有所帮助

您可以尝试一下 v-on:click.self=。。。 仅当目标元素为自身时才应触发。

---

希望这有帮助

很酷，谢谢大家。我最初尝试了事件修饰符，但我没有正确使用它们。很酷，谢谢大家。我最初尝试了事件修饰符，但使用不正确。

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>