父子组件中的 onclick 事件问题答案

【问题标题】：Problem with onclick event in parent & child component父子组件中的 onclick 事件问题
【发布时间】：2020-02-02 18:31:03
【问题描述】：

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

点击后打开其内容的手风琴标题。
可打开迷你模式菜单的齿轮图标。

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

点击齿轮前：

点击cog后：

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

<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 后手风琴打开（错误）

预期结果：点击 cog 后 Accordion 未打开

【问题讨论】：

你能在codepen中重现这个问题吗？

标签： javascript vue.js

【解决方案1】：

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

@click.stop="toggleSettings"

这就是你在 Vue.js 中执行 event.stopPropagation() 的方式

【讨论】：