Vue 3 compat构建下自定义事件$listeners未自动绑定问题排查求助

问题根因 #

你遇到的是@vue/compat运行时和编译时配置分离导致的配置不生效问题，以及MODE:3下的默认行为冲突：

• 你调整的INSTANCE_LISTENERS属于运行时compat配置，写在vue-loader的compilerOptions.compatConfig里不会生效，这块配置仅控制编译阶段的兼容行为。
• MODE:3默认完全对齐Vue3原生行为：Vue3已移除$listeners，所有事件监听器默认合并到$attrs对象中，但你项目依赖的大量Vue2生态组件（比如bootstrap-vue@2.x、v-tooltip@2.x等）内部仍在读取$listeners属性绑定事件，所以会出现监听器失效的情况。

解决方案 #

1. 补全运行时compat配置
   在项目入口文件（通常是main.js/main.ts）中添加以下配置，开启$listeners的兼容支持：

import { configureCompat } from 'vue'

configureCompat({
  INSTANCE_LISTENERS: true
})

配置保存后重启开发服务，即可恢复$listeners的自动绑定逻辑，无需手动给每个组件加v-on="$listeners"。

2. 长期迁移方案
   如果后续要完全脱离compat构建版本升级到原生Vue3，可以逐步做以下改造：

• 升级所有Vue2生态依赖到对应Vue3版本，比如bootstrap-vue替换为对应Vue3适配版本、v-tooltip升级到4.x以上的Vue3适配版本
• 自研组件中移除所有$listeners引用，事件监听器直接从$attrs中读取（Vue3中事件名会自动转为驼峰格式加on前缀，比如@change对应$attrs.onChange）

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