如何在 vuejs 中隔离父元素和子元素之间的单击事件处理程序

Posted 2023-02-22

【中文标题】如何在 vuejs 中隔离父元素和子元素之间的单击事件处理程序

【英文标题】：How to isolate click event handler between parent and child elements in vuejs

【发布时间】：2017-07-01 13:25:13

【问题描述】：

我正在尝试将语义 UI 组件转换为依赖 vuejs 而不是 jQuery，但我不知道如何隔离 v-on:click 在子元素和它的父元素之间。

在下面的示例中，我使用 v-on:click 按钮，该按钮将使用切换功能显示下拉菜单，还有另一个 v-on:click 分配给删除图标，这将触发另一个功能。

问题是，当我点击删除图标时，下拉菜单会出现。

如何防止这种情况发生？

`https://jsbin.com/minezij`

【参考方案1】：

您可以使用stop Event Modifiers 停止将事件传播到父元素。

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>