父组件和子组件中onclick事件的问题

Question

我在Vue.js中有两个组件：

1. 手风琴标题，点击它之后打开它的内容。打开迷你模式菜单的
2. Cog图标.

问题是当我点击齿轮时，我不想让手风琴打开它的内容。

在点击齿轮之前：

​

点击cog后：

​

我考虑过检查手风琴(父组件)中的模态菜单显示状态，但我不确定这是一个好方法。

<i class="fa fa-cog" @click="toggleSettings"/>
<div 
  class="order-settings" 
  :class="{'order-settings__show':isSettingsOpen}">
  <div class="order-settings__option"><p>Re-order</p></div>
  <div class="order-settings__option"><p>Convert to subscription</p</div>
  <div class="order-settings__option"><p>Download invoice</p></div>
  <div class="order-settings__option"><p>Export to CSV</p></div>
</div>

实际结果:手风琴在点击齿轮后打开(错误)

预期结果:手风琴按下齿轮后不会打开

Answer 1

将停止修饰符添加到齿轮单击事件，如下所示

@click.stop="toggleSettings"

这是如何在event.stopPropagation()中使用Vue.js实现的