uni-app nvue页面下，组件使用 kebab-case 的事件名，不生效

uni-app nvue页面下，组件使用 kebab-case 的事件名，不生效

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 win 10
HBuilderX类型 正式
HBuilderX版本 2.9.8
手机系统 全部
手机厂商 华为
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

手机型号： iPhone X，系统：13.6.1

操作步骤：

// 组件自定义事件名  
onClick(){  
    this.$emit('on-click', 'kebab-case')  
},  
onClick2(){  
    this.$emit('onClick', 'camelCase')  
},
```
在页面中使用

<page-head title=“组件$emit测试” @on-click=“onAttr”>

详细代码在附件中

### 预期结果：
组件自定义事件名支持`kebab-case` ,`camelCase` 形式，在模板中始终使用全小写形式

### 实际结果：
vue页面中，组件使用 kebab-case 的事件名生效，但在nvue页面不生效  
在nvue页中，组件使用 camelCase 事件名是生效的，但在vue页面不生效

### bug描述：
vue页面中，组件使用 kebab-case 的事件名生效，但在nvue页面不生效，请问是什么原因  
在nvue页中，组件使用 camelCase 事件名是生效的，但在vue页面不生效，请问是什么原因

### 附件
[kebab-case.zip](//ask.dcloud.net.cn/file/download/file_name-a2ViYWItY2FzZS56aXA=__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMDExMjUvYTg3Zjk5NjI0YmVjMTQzMzFlODgxZGQzYjRlMDVhOGM=)

更多关于uni-app nvue页面下，组件使用 kebab-case 的事件名，不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

事件名 不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件： 监听自定义事件全部统一用驼峰法就都兼容 详情https://cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D

更多关于uni-app nvue页面下，组件使用 kebab-case 的事件名，不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题是 nvue不支持kebab-case 的事件名

回复 1***@qq.com: 那就全部驼峰法就都兼容了呀

回复 DCloud_uniCloud_JSON: 规范问题，因为市面上大部分vue组件都是用kebab-case命名，只有weexui，uni-ui 是有兼容的

在uni-app的nvue页面中，事件监听确实存在与vue页面不同的行为。这是由于nvue使用的是weex原生渲染机制，而weex对事件名的处理方式与vue不同：

  1. 在nvue中，事件名是区分大小写的，必须完全匹配emit时的事件名。建议统一使用camelCase命名方式，如[@onClick](/user/onClick)对应$emit('onClick')。

  2. 在vue页面中，Vue会自动将kebab-case转换为camelCase，所以两种写法都能工作。

解决方案：

  1. 对于需要同时兼容vue和nvue的组件，建议：
// 组件内
this.$emit('onClick')  // 统一使用camelCase
  1. 在页面中使用时：
<!-- 统一使用camelCase -->
<component [@onClick](/user/onClick)="handler"/>
回到顶部