javascript - 组件上的不同@click事件 - VueJS

Question

我的项目从 VueJS 和 Buefy 开始。

该组件有两个不同的动作 click ：

• 点击青色区域-> 重定向到其他页面（操作 1）
• 单击洋红色区域-> 显示下拉菜单（操作 2）

但是当我点击Action 2时， Action 1总是有效的。

这是我的组件：

<MyComponent
  :projects="data"
  @click.native="actionOne()"
/>

在我的组件内部，我有下拉菜单（使用 Buefy 组件）：

<p>{{ data.projects }}</p>
<BDropdown aria-role="list">
  <BButton
    slot="trigger"
    class="button"
    type="is-text"
    @click.prevent="actionTwo()"
  >
    <BIcon icon="dots-horizontal" />
  </BButton>
  <BDropdownItem aria-role="listitem">Update</BDropdownItem>
  <BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>

我尝试使用不同的事件修饰符，但我无法获得预期的行为：

• stop
• prevent

Answer 1

这可能是由于事件冒泡而发生的。当您单击下拉元素时，单击事件会冒泡到青色区域。您需要做的是取消下拉元素的事件冒泡。

<BDropdown aria-role="list">
  <BButton
    slot="trigger"
    class="button"
    type="is-text"
    @click="actionTwo($event)"
  >
    <BIcon icon="dots-horizontal" />
  </BButton>
  <BDropdownItem aria-role="listitem">Update</BDropdownItem>
  <BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>

<script>
export default {
    methods: {
        actionTwo(e) {
            e.cancelBubble = true
        }
    }
}
</script>

Answer 2

您可以使用self修饰符。

<MyComponent
  :projects="data"
  @click.native.self="actionOne()"
/>

正如文档所说：

如果 event.target 是元素本身，
即不是来自子元素
（source） ，则仅触发处理程序

Answer 3

我找到了解决方案。问题来自下拉组件（Buefy）的特定事件。所以我stop在下拉触发点击事件中添加了修饰符，并prevent在我的组件中添加了。

这里的解决方案：

<MyComponent
  :projects="data"
  @click.native.prevent="actionOne()"
/>

<BDropdown aria-role="list" @click.native.stop>
  <BButton
    slot="trigger"
    class="button"
    type="is-text"
  >
    <BIcon icon="dots-horizontal" />
  </BButton>
  <BDropdownItem aria-role="listitem">Update</BDropdownItem>
  <BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>