Skip to content

Commit 91f058a

Browse files
authoredFeb 6, 2024··
fix(compiler-core): support v-bind shorthand syntax for dynamic slot name (#10218)
close #10213
1 parent f0b5f7e commit 91f058a

File tree

2 files changed

+27
-1
lines changed

2 files changed

+27
-1
lines changed
 

‎packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts

+16
Original file line numberDiff line numberDiff line change
@@ -389,4 +389,20 @@ describe('compiler: transform <slot> outlets', () => {
389389
},
390390
})
391391
})
392+
393+
test('dynamically named slot outlet with v-bind shorthand', () => {
394+
const ast = parseWithSlots(`<slot :name />`)
395+
expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
396+
type: NodeTypes.JS_CALL_EXPRESSION,
397+
callee: RENDER_SLOT,
398+
arguments: [
399+
`$slots`,
400+
{
401+
type: NodeTypes.SIMPLE_EXPRESSION,
402+
content: `name`,
403+
isStatic: false,
404+
},
405+
],
406+
})
407+
})
392408
})

‎packages/compiler-core/src/transforms/transformSlotOutlet.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {
66
type SlotOutletNode,
77
createCallExpression,
88
createFunctionExpression,
9+
createSimpleExpression,
910
} from '../ast'
1011
import { isSlotOutlet, isStaticArgOf, isStaticExp } from '../utils'
1112
import { type PropsExpression, buildProps } from './transformElement'
1213
import { ErrorCodes, createCompilerError } from '../errors'
1314
import { RENDER_SLOT } from '../runtimeHelpers'
1415
import { camelize } from '@vue/shared'
16+
import { processExpression } from './transformExpression'
1517

1618
export const transformSlotOutlet: NodeTransform = (node, context) => {
1719
if (isSlotOutlet(node)) {
@@ -76,7 +78,15 @@ export function processSlotOutlet(
7678
}
7779
} else {
7880
if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) {
79-
if (p.exp) slotName = p.exp
81+
if (p.exp) {
82+
slotName = p.exp
83+
} else if (p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION) {
84+
const name = camelize(p.arg.content)
85+
slotName = p.exp = createSimpleExpression(name, false, p.arg.loc)
86+
if (!__BROWSER__) {
87+
slotName = p.exp = processExpression(p.exp, context)
88+
}
89+
}
8090
} else {
8191
if (p.name === 'bind' && p.arg && isStaticExp(p.arg)) {
8292
p.arg.content = camelize(p.arg.content)

0 commit comments

Comments
 (0)
Please sign in to comment.