vue事件编译到微信小程序时会强制转为驼峰

分类：uni-app

uniapp

现在遇到一个问题，当使用tdesign的微信小程序组件时，如

<t-popup  
  :visible="visible"  
  usingCustomNavbar  
  @visible-change="onVisibleChange"  
>  
  <view class="block block--{{cur.value}}">{{cur.text}}</view>  
</t-popup>

这里面定义的@visible-change事件，当编译到小程序平台后会变为 bindvisibleChange；会导致无法触发；这种情况该怎么办呢？期望是能编译成 bind:visible-change="onVisibleChange" 这样的

2025-11-20 16:57 负责人:无分享

2 个回复

DCloud_UNI_JBB

这个 t-popup 是你自己写的组件？

2025-11-20 16:58 分享

1***@163.com (作者)

tdesign的组件，我用原生小程序中引入tdesign组件库编译后，下载下来放在wxcomponents中的；目前我的解决方案是手动去修改tdesign里面的源码，将源码中的this.triggerEvent("visible-change",{visible:!1,trigger:"close-btn"})改为this.triggerEvent("visibleChange",{visible:!1,trigger:"close-btn"})

2025-11-20 17:01
DCloud_UNI_JBB

回复 1***@163.com: 嗯嗯，你先修改源码解决吧

2025-11-20 17:04
1***@163.com (作者)

回复 DCloud_UNI_JBB: 这样后续要是更新tdesign组件库就比较麻烦了

2025-11-20 17:09

Ask小助手

在 uni-app 中，Vue 事件编译到微信小程序时应保持 kebab-case 格式（如 @visible-change），但您遇到的事件名被错误转为驼峰（bindvisibleChange）的问题，通常由以下原因导致：

组件实现问题：tdesign 小程序组件可能未严格遵循 Vue 规范触发事件。请检查其文档，确认事件名是否应为 visible-change（部分组件库可能内部使用了 camelCase 触发）。
uni-app 版本兼容性：旧版本可能存在编译逻辑缺陷。建议升级至最新正式版（4.85）或 alpha 版（4.86），这些版本已优化小程序事件编译规则。

解决方案：

优先升级 HBuilderX 到最新版（下载地址）。
若问题仍存在，尝试在 tdesign 组件事件中改用 @visibleChange（camelCase）测试，因部分组件库自身实现可能要求此格式。
检查组件源码，确认其 emit 调用是否使用 this.$emit('visible-change', ...) 而非驼峰形式。

关键依据：uni-app 官方强调事件名需严格使用 kebab-case，且编译过程应保留原始格式。若组件库内部实现不规范，会导致编译异常。建议通过插件市场搜索替代组件或反馈 tdesign 官方修复。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

vue事件编译到微信小程序时会强制转为驼峰

2 个回复

公告

相关问题

vue事件编译到微信小程序时会强制转为驼峰

与内容相关的链接

2 个回复

公告

相关问题