fix(compiler-core/v-on): pass noninitial arguments in cached event handlers (#1265)

Author: cathrinevaage

packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap

@@ -209,7 +209,7 @@ export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(\\"div\\", null, [
     _createVNode(\\"div\\", null, [
       _createVNode(\\"div\\", {
-        onClick: _cache[1] || (_cache[1] = $event => (_ctx.foo($event)))
+        onClick: _cache[1] || (_cache[1] = ($event, ...args) => (_ctx.foo($event, ...args)))
       })
     ])
   ]))

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

@@ -142,7 +142,7 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`$event => (`, { content: `i++` }, `)`]
+            children: [`($event, ...args) => (`, { content: `i++` }, `)`]
           }
         }
       ]
@@ -160,7 +160,11 @@ describe('compiler: transform v-on', () => {
             // should wrap with `{` for multiple statements
             // in this case the return value is discarded and the behavior is
             // consistent with 2.x
-            children: [`$event => {`, { content: `foo();bar()` }, `}`]
+            children: [
+              `($event, ...args) => {`,
+              { content: `foo();bar()` },
+              `}`
+            ]
           }
         }
       ]
@@ -196,7 +200,7 @@ describe('compiler: transform v-on', () => {
           value: {
             type: NodeTypes.COMPOUND_EXPRESSION,
             children: [
-              `$event => (`,
+              `($event, ...args) => (`,
               {
                 type: NodeTypes.COMPOUND_EXPRESSION,
                 children: [
@@ -226,7 +230,7 @@ describe('compiler: transform v-on', () => {
           value: {
             type: NodeTypes.COMPOUND_EXPRESSION,
             children: [
-              `$event => {`,
+              `($event, ...args) => {`,
               {
                 children: [
                   { content: `_ctx.foo` },
@@ -400,7 +404,11 @@ describe('compiler: transform v-on', () => {
         index: 1,
         value: {
           type: NodeTypes.COMPOUND_EXPRESSION,
-          children: [`$event => (`, { content: `_ctx.foo($event)` }, `)`]
+          children: [
+            `($event, ...args) => (`,
+            { content: `_ctx.foo($event, ...args)` },
+            `)`
+          ]
         }
       })
     })
@@ -444,7 +452,7 @@ describe('compiler: transform v-on', () => {
         value: {
           type: NodeTypes.COMPOUND_EXPRESSION,
           children: [
-            `$event => (`,
+            `($event, ...args) => (`,
             { children: [{ content: `_ctx.foo` }, `++`] },
             `)`
           ]

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

@@ -83,9 +83,9 @@ export const transformOn: DirectiveTransform = (
       // avoiding the need to be patched.
       if (isCacheable && isMemberExp) {
         if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-          exp.content += `($event)`
+          exp.content += `($event, ...args)`
         } else {
-          exp.children.push(`($event)`)
+          exp.children.push(`($event, ...args)`)
         }
       }
     }
@@ -102,7 +102,7 @@ export const transformOn: DirectiveTransform = (
     if (isInlineStatement || (isCacheable && isMemberExp)) {
       // wrap inline statement in a function expression
       exp = createCompoundExpression([
-        `$event => ${hasMultipleStatements ? `{` : `(`}`,
+        `($event, ...args) => ${hasMultipleStatements ? `{` : `(`}`,
         exp,
         hasMultipleStatements ? `}` : `)`
       ])