uni-app emit抛出事件(短横线命名)，在父组件中通过短横线命名监听事件监听不到，需要用驼峰命名监听

uni-app emit抛出事件(短横线命名)，在父组件中通过短横线命名监听事件监听不到，需要用驼峰命名监听

示例代码：

子组件 A
emit('click-left')

父组件 B
<a @click-left="clickLeft" />


## 操作步骤：


## 预期结果：


## 实际结果：


## bug描述：
子组件 `emit` 抛出事件(短横线命名)，在父组件中通过，短横线命名监听事件监听不到，需要用驼峰命名监听，在h5正常，微信小程序，头条小程序都监听不到  

## 相关链接：
- [https://ask.dcloud.net.cn/question/139245](https://ask.dcloud.net.cn/question/139245)

## 附件
- [tt-demo.zip](//ask.dcloud.net.cn/file/download/file_name-dHQtZGVtby56aXA=__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTEyMjcvYmVjN2JiNjNkMWU4NDhmMDdhNjBlZTc2ZWFlOWRhNWY=)
- [wx-demo.zip](//ask.dcloud.net.cn/file/download/file_name-d3gtZGVtby56aXA=__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTEyMjcvMGI3MDJkNGNmNGM1YzQ5NGJmNTk0YjQ0NTZjYzc3ZmU=)

更多关于uni-app emit抛出事件(短横线命名)，在父组件中通过短横线命名监听事件监听不到，需要用驼峰命名监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

vue2还是vue3？直接使用微信小程序（不使用 uni-app ）测试一下，如果仍然有问题，反馈到微信小程序社区

更多关于uni-app emit抛出事件(短横线命名)，在父组件中通过短横线命名监听事件监听不到，需要用驼峰命名监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue3,使用原生微信小程序是正常的

回复 1***@163.com: 直接使用头条小程序（不使用 uni-app ）是否正常？

请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

回复 DCloud_UNI_Anne: 字节小程序开发者工具测试正常

回复 DCloud_UNI_Anne: 附件已上传

回复 1***@163.com: 收到




问题已记录后续优化，已加分，感谢您的反馈！

HBuilderX alpha 3.4.0+ 已修复该问题

在 uni-app 中，事件监听确实存在命名规范的问题。根据官方文档和实际开发经验，子组件通过 emit 触发事件时，事件名推荐使用短横线命名（kebab-case），但在父组件中监听时，需要转换为驼峰命名（camelCase）。

原因分析：

  1. Vue 规范：Vue 本身在模板中推荐使用短横线命名监听事件，但 uni-app 在处理跨平台编译时（尤其是小程序端），事件名会被统一转换为驼峰格式。
  2. 小程序限制：微信小程序、头条小程序等平台的事件绑定不支持短横线命名，底层会强制转为驼峰命名。因此，在父组件中若使用短横线监听，可能无法匹配到子组件抛出的事件。
  3. H5 正常的原因：H5 端基于 Vue 原生实现，短横线命名可以正常监听，但小程序端因底层差异需要适配驼峰命名。

解决方案：

  • 子组件抛出事件：保持使用短横线命名（如 emit('click-left')）。
  • 父组件监听事件：改为驼峰命名（如 [@clickLeft](/user/clickLeft)="clickLeft"）。

示例修正：

// 子组件 A
this.$emit('click-left')

// 父组件 B
<a [@clickLeft](/user/clickLeft)="clickLeft" />
回到顶部