parent & child 组件中的 onclick 事件有问题

Question

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

Accordion header 单击它打开它的内容。
用于打开 mini-modal 菜单的齿轮图标。

问题是当我点击 cog 时，我不希望手风琴打开它的内容。

点击齿轮前：

点击齿轮后：

我考虑过在 Accordion（parent 组件）中检查模态菜单显示状态，但我不确定这是个好方法。

<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>

实际结果：点击齿轮后手风琴打开（错误）

预期结果：单击 cog 后手风琴未打开

Answer 1

像这样将停止修饰符添加到齿轮点击事件

@click.stop="toggleSettings"

这就是您在 Vue.js

中 event.stopPropagation() 的做法

parent & child 组件中的 onclick 事件有问题

Problem with onclick event in parent & child component

javascript

vue.js