feat(compiler-vapor): support v-on for component

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

@@ -63,9 +63,9 @@ export function genCreateComponent(
       ...props.map(prop => {
         return [
           ...genPropKey(prop, context),
-          ': () => (',
-          ...genExpression(prop.values[0], context),
-          ')',
+          ...(prop.isHandler
+            ? [': ', ...genExpression(prop.values[0], context), ',']
+            : [': () => (', ...genExpression(prop.values[0], context), ')']),
         ]
       }),
     )

packages/compiler-vapor/src/transform.ts

@@ -41,6 +41,7 @@ export type DirectiveTransform = (
 export interface DirectiveTransformResult {
   key: SimpleExpressionNode
   value: SimpleExpressionNode
+  isHandler?: boolean
   modifier?: '.' | '^'
   runtimeCamelize?: boolean
 }

packages/compiler-vapor/src/transforms/vOn.ts

@@ -1,9 +1,15 @@
-import { ErrorCodes, createCompilerError } from '@vue/compiler-dom'
+import {
+  ElementTypes,
+  ErrorCodes,
+  createCompilerError,
+  createSimpleExpression,
+} from '@vue/compiler-dom'
 import type { DirectiveTransform } from '../transform'
 import { IRNodeTypes, type KeyOverride, type SetEventIRNode } from '../ir'
 import { resolveModifiers } from '@vue/compiler-dom'
 import { extend, makeMap } from '@vue/shared'
 import { resolveExpression } from '../utils'
+import { EMPTY_EXPRESSION } from './utils'
 
 const delegatedEvents = /*#__PURE__*/ makeMap(
   'beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,' +
@@ -14,6 +20,8 @@ const delegatedEvents = /*#__PURE__*/ makeMap(
 
 export const transformVOn: DirectiveTransform = (dir, node, context) => {
   let { arg, exp, loc, modifiers } = dir
+  const isComponent = node.tagType === ElementTypes.COMPONENT
+
   if (!exp && (!modifiers.length || !arg)) {
     context.options.onError(
       createCompilerError(ErrorCodes.X_V_ON_NO_EXPRESSION, loc),
@@ -70,6 +78,16 @@ export const transformVOn: DirectiveTransform = (dir, node, context) => {
     }
   }
 
+  if (isComponent) {
+    const eventName = arg.content
+    const handler = exp || EMPTY_EXPRESSION
+    return {
+      key: createSimpleExpression(eventName, true, arg.loc),
+      value: handler,
+      isHandler: true,
+    }
+  }
+
   const operation: SetEventIRNode = {
     type: IRNodeTypes.SET_EVENT,
     element: context.reference(),

packages/runtime-vapor/src/componentEmits.ts

@@ -74,10 +74,17 @@ export function emit(
   // TODO: warn
 
   let handlerName
-  let handler =
-    rawProps[(handlerName = toHandlerKey(event))] ||
-    // also try camelCase event handler (#2249)
-    rawProps[(handlerName = toHandlerKey(camelize(event)))]
+  let handler
+  for (let rawProp of rawProps) {
+    if (
+      (handler =
+        rawProp[(handlerName = toHandlerKey(event))] ||
+        // also try camelCase event handler (#2249)
+        rawProp[(handlerName = toHandlerKey(camelize(event)))])
+    ) {
+      break
+    }
+  }
   // for v-model update:xxx events, also trigger kebab-case equivalent
   // for props passed via kebab-case
   if (!handler && isModelListener) {