事件被触发两次 - 由孩子和父母答案

【问题标题】：Event is triggerd twice - by child and parent事件被触发两次 - 由孩子和父母
【发布时间】：2021-05-25 15:10:26
【问题描述】：

我正在努力找出为什么 updateOptions() 函数在下面的简单示例中被触发两次。我能够确定（仅通过记录） component-to-filter-by-header 中的 @change-event 首先被触发，然后 @update:options 被父级触发。为了使下面的示例代码尽可能简单，我删除了我认为不是问题的所有其他内容

 <v-data-table
     @update:options="updateOptions"  // parent event triggered (should not happen)
 >
     <template v-slot:[`header.book`]>
         <component-to-filter-by-header
             @change="updateOptions(...);" // child event triggered
         />
     </template>
     ...
</v-data-table>

谁能帮我理解为什么会发生这种情况以及如何防止父组件触发其事件

干杯

【问题讨论】：

标签： vue.js events vuetify.js

【解决方案1】：

@update:options="updateOptions" 被触发的原因是因为 options 对象有 headers 信息，你可以查看文档here

这是解决问题的方法

您可以将 .stop 修饰符放在ComponentToFilterByHeader child 组件中

<template>
  <div>
    <v-btn @click.stop="$emit('change')">click</v-btn>
  </div>
</template>

希望这行得通！

【讨论】：