diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts index f4ff0c31cba..452efa9bc33 100644 --- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts +++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts @@ -15,6 +15,7 @@ import { } from '../src' import { currentInstance, nextTick, ref } from '@vue/runtime-dom' import { makeRender } from './_utils' +import type { DynamicSlot } from '../src/componentSlots' const define = makeRender() @@ -468,5 +469,39 @@ describe('component: slots', () => { await nextTick() expect(html()).toBe('content') }) + + test('dynamic slot work with v-if', async () => { + const val = ref('header') + const toggle = ref(false) + + const Comp = defineVaporComponent(() => { + const n0 = template('
')() + prepend(n0 as any as ParentNode, createSlot('header', null)) + return n0 + }) + + const { host } = define(() => { + // dynamic slot + return createComponent(Comp, null, { + $: [ + () => + (toggle.value + ? { + name: val.value, + fn: () => { + return template('

')() + }, + } + : void 0) as DynamicSlot, + ], + }) + }).render() + + expect(host.innerHTML).toBe('
') + + toggle.value = true + await nextTick() + expect(host.innerHTML).toBe('

') + }) }) }) diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts index cc6a825222e..bf3f4ae2de4 100644 --- a/packages/runtime-vapor/src/componentSlots.ts +++ b/packages/runtime-vapor/src/componentSlots.ts @@ -70,12 +70,14 @@ export function getSlot( source = dynamicSources[i] if (isFunction(source)) { const slot = source() - if (isArray(slot)) { - for (const s of slot) { - if (s.name === key) return s.fn + if (slot) { + if (isArray(slot)) { + for (const s of slot) { + if (s.name === key) return s.fn + } + } else if (slot.name === key) { + return slot.fn } - } else if (slot.name === key) { - return slot.fn } } else if (hasOwn(source, key)) { return source[key]