From: zhoulixiang <18366276315@163.com>
Date: Tue, 6 Feb 2024 09:54:06 +0000 (+0800)
Subject: fix(compiler-core): support v-bind shorthand syntax for dynamic slot name (#10218)
X-Git-Tag: v3.4.16~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=91f058a90cd603492649633d153b120977c4df6b;p=thirdparty%2Fvuejs%2Fcore.git

fix(compiler-core): support v-bind shorthand syntax for dynamic slot name (#10218)

close #10213
---

diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
index f8809ab6a7..6420bdbbda 100644
--- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -389,4 +389,20 @@ describe('compiler: transform <slot> outlets', () => {
       },
     })
   })
+
+  test('dynamically named slot outlet with v-bind shorthand', () => {
+    const ast = parseWithSlots(`<slot :name />`)
+    expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: RENDER_SLOT,
+      arguments: [
+        `$slots`,
+        {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `name`,
+          isStatic: false,
+        },
+      ],
+    })
+  })
 })
diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 310b6a94ea..ea635e997b 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -6,12 +6,14 @@ import {
   type SlotOutletNode,
   createCallExpression,
   createFunctionExpression,
+  createSimpleExpression,
 } from '../ast'
 import { isSlotOutlet, isStaticArgOf, isStaticExp } from '../utils'
 import { type PropsExpression, buildProps } from './transformElement'
 import { ErrorCodes, createCompilerError } from '../errors'
 import { RENDER_SLOT } from '../runtimeHelpers'
 import { camelize } from '@vue/shared'
+import { processExpression } from './transformExpression'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
   if (isSlotOutlet(node)) {
@@ -76,7 +78,15 @@ export function processSlotOutlet(
       }
     } else {
       if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) {
-        if (p.exp) slotName = p.exp
+        if (p.exp) {
+          slotName = p.exp
+        } else if (p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION) {
+          const name = camelize(p.arg.content)
+          slotName = p.exp = createSimpleExpression(name, false, p.arg.loc)
+          if (!__BROWSER__) {
+            slotName = p.exp = processExpression(p.exp, context)
+          }
+        }
       } else {
         if (p.name === 'bind' && p.arg && isStaticExp(p.arg)) {
           p.arg.content = camelize(p.arg.content)