事件被触发两次 - child 和 parent

Question

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

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

谁能帮我理解为什么会这样，以及如何防止 parent 组件触发事件

干杯

Answer 1

触发 @update:options="updateOptions" 的原因是因为选项 object 有 headers 信息，您可以查看文档 here

这是解决问题的方法

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

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

希望这有效！

事件被触发两次 - child 和 parent

Event is triggerd twice - by child and parent

events

vue.js

vuetify.js