diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts index 35de11686..0513ff4e3 100644 --- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts @@ -12,7 +12,8 @@ import { SimpleExpressionNode, ConditionalExpression, IfConditionalExpression, - VNodeCall + VNodeCall, + ElementTypes } from '../../src/ast' import { ErrorCodes } from '../../src/errors' import { CompilerOptions, generate } from '../../src' @@ -77,6 +78,22 @@ describe('compiler: v-if', () => { expect(node.branches[0].children[2].type).toBe(NodeTypes.ELEMENT) expect((node.branches[0].children[2] as ElementNode).tag).toBe(`p`) }) + + test('component v-if', () => { + const { node } = parseWithIfTransform(``) + expect(node.type).toBe(NodeTypes.IF) + expect(node.branches.length).toBe(1) + expect((node.branches[0].children[0] as ElementNode).tag).toBe( + `Component` + ) + expect((node.branches[0].children[0] as ElementNode).tagType).toBe( + ElementTypes.COMPONENT + ) + expect( + ((node.branches[0].children[0] as ElementNode)! + .codegenNode as VNodeCall)!.isBlock + ).toBe(false) + }) test('v-if + v-else', () => { const { node } = parseWithIfTransform(`

`) diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts index 5394cb8fd..cb0d6bd38 100644 --- a/packages/compiler-core/src/transforms/vIf.ts +++ b/packages/compiler-core/src/transforms/vIf.ts @@ -212,7 +212,12 @@ function createChildrenCodegenNode( const vnodeCall = (firstChild as ElementNode) .codegenNode as BlockCodegenNode // Change createVNode to createBlock. - if (vnodeCall.type === NodeTypes.VNODE_CALL) { + if ( + vnodeCall.type === NodeTypes.VNODE_CALL && + // component vnodes are always tracked and its children are + // compiled into slots so no need to make it a block + (firstChild as ElementNode).tagType !== ElementTypes.COMPONENT + ) { vnodeCall.isBlock = true helper(OPEN_BLOCK) helper(CREATE_BLOCK)