diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
index dd00e552675..e7a2b30e69c 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
@@ -12,6 +12,21 @@ export function render(_ctx) {
}"
`;
+exports[`v-on > component event with special characters 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const _on_update_model = () => {}
+ const _on_update_model1 = () => {}
+ const n0 = _createComponentWithFallback(_component_Foo, {
+ "onUpdate:model": () => _on_update_model,
+ "onUpdate-model": () => _on_update_model1
+ }, null, true)
+ return n0
+}"
+`;
+
exports[`v-on > dynamic arg 1`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("
", true)
diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
index aca88c791b8..963f46ad2a3 100644
--- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
@@ -695,4 +695,16 @@ describe('v-on', () => {
expect(code).matchSnapshot()
expect(code).include('n0.$evtclick = e => _ctx.handleClick(e)')
})
+
+ test('component event with special characters', () => {
+ const { code } = compileWithVOn(
+ ` {}" @update-model="() => {}" />`,
+ )
+
+ expect(code).matchSnapshot()
+ 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')
+ })
})
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
index 10705a2c795..fb76abaa505 100644
--- a/packages/compiler-vapor/src/generators/component.ts
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -26,7 +26,7 @@ import {
genCall,
genMulti,
} from './utils'
-import { genExpression } from './expression'
+import { genExpression, genVarName } from './expression'
import { genPropKey, genPropValue } from './prop'
import {
type SimpleExpressionNode,
@@ -102,6 +102,7 @@ export function genCreateComponent(
function getUniqueHandlerName(context: CodegenContext, name: string): string {
const { seenInlineHandlerNames } = context
+ name = genVarName(name)
const count = seenInlineHandlerNames[name] || 0
seenInlineHandlerNames[name] = count + 1
return count === 0 ? name : `${name}${count}`
diff --git a/packages/compiler-vapor/src/generators/expression.ts b/packages/compiler-vapor/src/generators/expression.ts
index aa7edf658f5..c70d4a56613 100644
--- a/packages/compiler-vapor/src/generators/expression.ts
+++ b/packages/compiler-vapor/src/generators/expression.ts
@@ -647,7 +647,7 @@ function parseExp(context: CodegenContext, content: string): Node {
return parseExpression(`(${content})`, options)
}
-function genVarName(exp: string): string {
+export function genVarName(exp: string): string {
return `${exp
.replace(/[^a-zA-Z0-9]/g, '_')
.replace(/_+/g, '_')