fix(runtime-vapor): handle component scopeid on nested slot (#14326)

Co-authored-by: daiwei <daiwei521@126.com>

diff --git a/packages/runtime-vapor/__tests__/scopeId.spec.ts b/packages/runtime-vapor/__tests__/scopeId.spec.ts
index 04b54e7d1cb476274a9822a18604917f11ba49d6..646a50f619f48a7513d2e2611c95a36fc2f70c8c 100644 (file)
--- a/packages/runtime-vapor/__tests__/scopeId.spec.ts
+++ b/packages/runtime-vapor/__tests__/scopeId.spec.ts
@@ -310,6 +310,70 @@ describe('scopeId', () => {
         `</div>`,
     )
   })
+
+  test('nested components with slots', async () => {
+    const Child = defineVaporComponent({
+      setup() {
+        const n0 = template('<div>')() as any
+        setInsertionState(n0, null, true)
+        createSlot('default')
+        return n0
+      },
+    })
+    const Parent = defineVaporComponent({
+      __scopeId: 'data-v-parent',
+      setup() {
+        const n3 = createComponent(
+          Child,
+          null,
+          {
+            default: withVaporCtx(() => {
+              const n2 = createComponent(
+                Child,
+                null,
+                {
+                  default: withVaporCtx(() => {
+                    const n1 = createComponent(
+                      Child,
+                      null,
+                      {
+                        default: () => {
+                          const t0 = template('test')() as any
+                          return t0
+                        },
+                      },
+                      true,
+                    )
+                    return n1
+                  }),
+                },
+                true,
+              )
+              return n2
+            }),
+          },
+          true,
+        )
+        return n3
+      },
+    })
+
+    const { host } = define({
+      __scopeId: 'app',
+      setup() {
+        return createComponent(Parent)
+      },
+    }).render()
+
+    expect(host.innerHTML).toBe(
+      `<div data-v-parent="" app="">` +
+        `<div data-v-parent="">` +
+        `<div data-v-parent="">test<!--slot-->` +
+        `</div><!--slot-->` +
+        `</div><!--slot-->` +
+        `</div>`,
+    )
+  })
 })
 
 describe('vdom interop', () => {

diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 36cb9f260f33472362cbcecf5fa51bd44f17f573..11f091cbdba6abccb14fc103c22fce5dce5e79bf 100644 (file)
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -159,7 +159,7 @@ export function getScopeOwner(): VaporComponentInstance | null {
  * 2. Elements inherit the slot owner's scopeId
  */
 export function withVaporCtx(fn: Function): BlockFn {
-  const owner = currentInstance as VaporComponentInstance
+  const owner = getScopeOwner()
   return (...args: any[]) => {
     const prevOwner = setCurrentSlotOwner(owner)
     try {