自定义下拉菜单项点击覆盖默认方法，咨询先执行默认再执行自定义的方案

场景1：无法修改custom-menu-item组件源码 #

如果不能改动组件内部代码，可尝试以下几种实现方式：

• 利用事件捕获机制调整执行顺序
  使用capture修饰符让自定义事件在捕获阶段触发，组件内部默认逻辑一般在冒泡阶段执行，以此保证默认逻辑先运行：

  <custom-dropdown>
    <custom-menu-item @click.capture="onItemClick"></custom-menu-item>
  </custom-dropdown>
  

• 监听原生点击事件
  通过native修饰符监听组件根元素的原生点击事件，组件内部的自定义点击逻辑会正常触发，两者互不干扰：

  <custom-dropdown>
    <custom-menu-item @click.native="onItemClick"></custom-menu-item>
  </custom-dropdown>
  

  注：如果组件内部阻止了原生事件传播，此方法可能失效。

• 通过ref调用组件默认方法
  若组件暴露了内部默认点击处理函数（比如handleClick），可通过ref获取实例后手动调用：

  <custom-dropdown>
    <custom-menu-item ref="menuItem" @click="onItemClick"></custom-menu-item>
  </custom-dropdown>
  

  methods: {
    onItemClick() {
      // 调用组件默认点击方法
      this.$refs.menuItem.handleClick?.();
      // 执行自定义逻辑
      // 你的业务代码
    }
  }
  

场景2：可以修改custom-menu-item组件源码 #

如果能改动组件代码，最稳妥的方式是让组件先执行自身默认逻辑，再触发自定义事件供父组件监听：

组件内部代码修改：

<template>
  <div @click="handleDefaultClick">
    <!-- 组件原有内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleDefaultClick() {
      // 组件默认点击逻辑
      // 原有业务代码
      // 触发自定义事件通知父组件
      this.$emit('after-click');
    }
  }
}
</script>

父组件中监听自定义事件：

<custom-dropdown>
  <custom-menu-item @after-click="onItemClick"></custom-menu-item>
</custom-dropdown>

内容的提问来源于stack exchange，提问作者zajsky