fix(compiler-vapor): camelize kebab-case component event handlers (#14211)

packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap

@@ -12,6 +12,16 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`v-on > component event should camelize kebab-case 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponentWithFallback(_component_Comp, { onNameClick: () => _ctx.handleClick }, null, true)
+  return n0
+}"
+`;
+
 exports[`v-on > component event with special characters 1`] = `
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
@@ -21,7 +31,7 @@ export function render(_ctx) {
   const _on_update_model1 = () => {}
   const n0 = _createComponentWithFallback(_component_Foo, {
     "onUpdate:model": () => _on_update_model,
-    "onUpdate-model": () => _on_update_model1
+    onUpdateModel: () => _on_update_model1
   }, null, true)
   return n0
 }"

packages/compiler-vapor/__tests__/transforms/vOn.spec.ts

@@ -725,6 +725,12 @@ describe('v-on', () => {
     expect(code).contains('const _on_update_model = () => {}')
     expect(code).contains('const _on_update_model1 = () => {}')
     expect(code).contains('"onUpdate:model": () => _on_update_model')
-    expect(code).contains('"onUpdate-model": () => _on_update_model1')
+    expect(code).contains('onUpdateModel: () => _on_update_model1')
+  })
+
+  test('component event should camelize kebab-case', () => {
+    const { code } = compileWithVOn(`<Comp @name-click="handleClick" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('onNameClick: () => _ctx.handleClick')
   })
 })

packages/compiler-vapor/src/generators/prop.ts

@@ -21,6 +21,7 @@ import {
   genMulti,
 } from './utils'
 import {
+  camelize,
   canSetValueDirectly,
   capitalize,
   extend,
@@ -125,7 +126,7 @@ export function genPropKey(
   if (node.isStatic) {
     // only quote keys if necessary
     const keyName =
-      (handler ? toHandlerKey(node.content) : node.content) +
+      (handler ? toHandlerKey(camelize(node.content)) : node.content) +
       handlerModifierPostfix
     return [
       [