From: edison <daiwei521@126.com>
Date: Wed, 29 Jan 2025 02:21:30 +0000 (+0800)
Subject: fix(runtime-vapor): properly handle dynamic slot work with v-if (#12660)
X-Git-Tag: v3.6.0-alpha.1~16^2~135
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fd2917c8b6e5bf7892f27b8326d847505addfa27;p=thirdparty%2Fvuejs%2Fcore.git

fix(runtime-vapor): properly handle dynamic slot work with v-if (#12660)
---

diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
index f4ff0c31cb..452efa9bc3 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<any>()
 
@@ -468,5 +469,39 @@ describe('component: slots', () => {
       await nextTick()
       expect(html()).toBe('content<!--if--><!--slot-->')
     })
+
+    test('dynamic slot work with v-if', async () => {
+      const val = ref('header')
+      const toggle = ref(false)
+
+      const Comp = defineVaporComponent(() => {
+        const n0 = template('<div></div>')()
+        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('<h1></h1>')()
+                    },
+                  }
+                : void 0) as DynamicSlot,
+          ],
+        })
+      }).render()
+
+      expect(host.innerHTML).toBe('<div><!--slot--></div>')
+
+      toggle.value = true
+      await nextTick()
+      expect(host.innerHTML).toBe('<div><h1></h1><!--slot--></div>')
+    })
   })
 })
diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index cc6a825222..bf3f4ae2de 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]