uni-app hBuilderX 4.76 uniapp vue2版 WEB和APP端组件的事件捕获不支持横杠转驼峰写法，小程序端支持

uni-app hBuilderX 4.76 uniapp vue2版 WEB和APP端组件的事件捕获不支持横杠转驼峰写法，小程序端支持

示例代码：

<template>
<view @click="click">test</view>
</template>  

<script>
export default {
methods: {
click() {
this.$emit('row-click');
},
},
};
</script>  

<template>
<com [@rowClick](/user/rowClick)="clickHandle"></com>
</template>  

<script>
export default {
methods: {
clickHandle() {
console.log(' clickHandle  ');
},
},
};
</script>

操作步骤：

点击组件的test标签，父页面index.vue捕获row-click事件

预期结果：

微信小程序端、WEB端、APP端，均可以使用rowClick捕获row-click

实际结果：

微信小程序端可以，WEB端、APP端不行

bug描述：

hBuilderX 正式版 4.76 vue2版，组件以横杠命名的事件名（例如row-click），在其父组件使用驼峰写法（@rowClick=‘clickHandle’）进行事件捕获，微信小程序端支持，WEB和APP端不支持。


更多关于uni-app hBuilderX 4.76 uniapp vue2版 WEB和APP端组件的事件捕获不支持横杠转驼峰写法，小程序端支持的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app hBuilderX 4.76 uniapp vue2版 WEB和APP端组件的事件捕获不支持横杠转驼峰写法，小程序端支持的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的跨端兼容性问题。在uni-app中，事件命名规范在不同平台确实存在差异：

根本原因：

  • 小程序端基于微信原生机制，自动支持事件名的横杠转驼峰转换
  • WEB端和APP端基于Vue2的浏览器事件机制，不支持自动转换

解决方案：

  1. 统一使用横杠命名法（推荐）
<com @row-click="clickHandle"></com>
  1. 或在组件内部统一处理
// 组件内部
methods: {
  click() {
    // 同时触发两种命名
    this.$emit('row-click');
    this.$emit('rowClick');
  }
}
回到顶部