fix(compiler-ssr): fix component event handlers inheritance in ssr

fix #5664

packages/compiler-ssr/src/index.ts

@@ -10,7 +10,8 @@ import {
   trackSlotScopes,
   noopDirectiveTransform,
   transformBind,
-  transformStyle
+  transformStyle,
+  transformOn
 } from '@vue/compiler-dom'
 import { ssrCodegenTransform } from './ssrCodegenTransform'
 import { ssrTransformElement } from './transforms/ssrTransformElement'
@@ -70,11 +71,12 @@ export function compile(
     directiveTransforms: {
       // reusing core v-bind
       bind: transformBind,
+      on: transformOn,
       // model and show has dedicated SSR handling
       model: ssrTransformModel,
       show: ssrTransformShow,
       // the following are ignored during SSR
-      on: noopDirectiveTransform,
+      // on: noopDirectiveTransform,
       cloak: noopDirectiveTransform,
       once: noopDirectiveTransform,
       memo: noopDirectiveTransform,

packages/compiler-ssr/src/transforms/ssrTransformElement.ts

@@ -194,7 +194,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
           if (!needMergeProps) {
             node.children = [createInterpolation(prop.exp, prop.loc)]
           }
-        } else if (!needMergeProps) {
+        } else if (!needMergeProps && prop.name !== 'on') {
           // Directive transforms.
           const directiveTransform = context.directiveTransforms[prop.name]
           if (directiveTransform) {