Skip to content

Commit

Permalink
fix(compiler-core): support v-bind shorthand syntax for dynamic slot …
Browse files Browse the repository at this point in the history
…name (#10218)

close #10213
  • Loading branch information
zh-lx authored Feb 6, 2024
1 parent f0b5f7e commit 91f058a
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
],
})
})
})
12 changes: 11 additions & 1 deletion packages/compiler-core/src/transforms/transformSlotOutlet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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)
Expand Down

0 comments on commit 91f058a

Please sign in to comment.