Vue.js中子组件emits选项不生效但父组件接收事件正常如何解决？

核心原因 #

你的代码写法本身完全符合Vue官方规范，出现emits校验不执行的最常见原因是版本兼容问题：

• emits选项是Vue 3.0正式推出的特性，Vue 2.x版本直到2.7版本才向后兼容支持该配置
• 如果你的项目依赖的Vue版本低于2.7（Vue2场景）或低于3.0正式版（Vue3场景），框架会直接忽略组件中的emits配置，仅保留原生的事件传递能力，因此会出现父组件能正常监听触发事件，但子组件的校验函数完全不执行的情况

少数情况下也可能是项目引入的自定义插件修改了$emit的原生实现，导致校验逻辑被拦截。

解决方法 #

1. 优先升级项目的Vue版本到符合要求的版本：
   • Vue2项目升级到2.7.x及以上稳定版本
   • Vue3项目升级到3.0.0及以上正式版本
2. 如果因项目限制无法升级Vue版本，可以在触发$emit前手动编写校验逻辑替代内置的emits校验功能
3. 版本符合要求的前提下可以做简单测试验证功能：将$emit传递的payload修改为{param: null}，如果控制台输出no value的警告，说明emits校验已经正常工作
4. 如果版本达标仍不生效，逐一排查项目引入的第三方插件，确认是否存在修改Vue原生$emit逻辑的配置

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