diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts index 1bcd52d0ea9..d5e9f757582 100644 --- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts @@ -216,12 +216,16 @@ describe('compiler: transform outlets', () => { `$slots`, `"default"`, `{}`, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + type: NodeTypes.JS_FUNCTION_EXPRESSION, + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) @@ -235,12 +239,16 @@ describe('compiler: transform outlets', () => { `$slots`, `"foo"`, `{}`, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + type: NodeTypes.JS_FUNCTION_EXPRESSION, + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) @@ -268,12 +276,16 @@ describe('compiler: transform outlets', () => { } ] }, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + type: NodeTypes.JS_FUNCTION_EXPRESSION, + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) @@ -301,12 +313,16 @@ describe('compiler: transform outlets', () => { } ] }, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + type: NodeTypes.JS_FUNCTION_EXPRESSION, + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts index da8ab813210..58ef0b2f488 100644 --- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts +++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts @@ -4,7 +4,8 @@ import { CallExpression, createCallExpression, ExpressionNode, - SlotOutletNode + SlotOutletNode, + createFunctionExpression } from '../ast' import { isSlotOutlet, findProp } from '../utils' import { buildProps, PropsExpression } from './transformElement' @@ -29,7 +30,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => { if (!slotProps) { slotArgs.push(`{}`) } - slotArgs.push(children) + slotArgs.push(createFunctionExpression([], children, false, false, loc)) } node.codegenNode = createCallExpression( diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts index 12f4b18d061..c0bfcaa7bf0 100644 --- a/packages/runtime-core/src/helpers/renderSlot.ts +++ b/packages/runtime-core/src/helpers/renderSlot.ts @@ -15,8 +15,8 @@ export function renderSlot( name: string, props: Data = {}, // this is not a user-facing function, so the fallback is always generated by - // the compiler and guaranteed to be an array - fallback?: VNodeArrayChildren + // the compiler and guaranteed to be a function returning an array + fallback?: () => VNodeArrayChildren ): VNode { let slot = slots[name] @@ -34,7 +34,7 @@ export function renderSlot( createBlock( Fragment, { key: props.key }, - slot ? slot(props) : fallback || [], + slot ? slot(props) : fallback ? fallback() : [], slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL ) )