refactor(component-instance): $slots

pages.json

@@ -298,7 +298,13 @@
       }
     },
     {
-      "path": "pages/component-instance/slots/slots",
+      "path": "pages/component-instance/slots/slots-options",
+      "style": {
+        "navigationBarTitleText": "$slots"
+      }
+    },
+    {
+      "path": "pages/component-instance/slots/slots-composition",
       "style": {
         "navigationBarTitleText": "$slots"
       }

pages/component-instance/slots/slot-composition.uvue

+<template>
+  <view>
+    <slot name="header"></slot>
+    <slot name="footer"></slot>
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="uts">
+const slots = useSlots()
+
+const hasSlots = (): boolean => {
+  const header = slots['header']
+  const footer = slots['footer']
+  const def = slots['default']
+
+  return header !== null && footer !== null && def !== null
+}
+
+defineExpose({
+  hasSlots
+})
+</script>
\ No newline at end of file

pages/component-instance/slots/slots-composition.uvue

+<template>
+  <view class="page">
+    <SlotComp class="slot-comp">
+      <template v-slot:header>header</template>
+      <template v-slot:default>default</template>
+      <template v-slot:footer>footer</template>
+    </SlotComp>
+  </view>
+</template>
+
+<script setup lang="uts">
+  import SlotComp from './slot-composition.uvue'
+</script>
+
+<style>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+</style>
\ No newline at end of file

pages/component-instance/slots/slots.uvue → pages/component-instance/slots/slots-options.uvue

-<template>
-  <view class="page">
-    <slot-comp class="slot-comp">
-      <template v-slot:header>header</template>
-      <template v-slot:default>default</template>
-      <template v-slot:footer>footer</template>
-    </slot-comp>
-  </view>
-</template>
-
-<script lang="uts">
-  import slot from './slot.uvue'
-
-  export default {
-    components: {
-      slotComp: slot
-    }
-  }
-</script>
-
-<style>
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
+<template>
+  <view class="page">
+    <slot-comp class="slot-comp">
+      <template v-slot:header>header</template>
+      <template v-slot:default>default</template>
+      <template v-slot:footer>footer</template>
+    </slot-comp>
+  </view>
+</template>
+
+<script lang="uts">
+  import slot from './slot-options.uvue'
+
+  export default {
+    components: {
+      slotComp: slot
+    }
+  }
+</script>
+
+<style>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
 </style>
\ No newline at end of file

pages/component-instance/slots/slots.test.js

-const PAGE_PATH = '/pages/component-instance/slots/slots'
+const PAGE_PATH = '/pages/component-instance/slots/slots-options'
+const PAGE_COMPOSITION_PATH = '/pages/component-instance/slots/slots-composition'
 
 describe('$slots', () => {
   let page
-  beforeAll(async () => {
+
+  it('$slots Options API 生效', async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor(500)
+    const slotComp = await page.$('.slot-comp')
+    const hasSlots = await slotComp.callMethod('hasSlots')
+    expect(hasSlots).toBe(true)
   })
 
-  it('$slots 生效', async () => {
+  it('$slots Composition API 生效', async () => {
+    page = await program.reLaunch(PAGE_COMPOSITION_PATH)
+    await page.waitFor(500)
     const slotComp = await page.$('.slot-comp')
     const hasSlots = await slotComp.callMethod('hasSlots')
-
     expect(hasSlots).toBe(true)
   })
 })

pages/index/index.uvue

@@ -215,8 +215,24 @@ export default {
                   url: 'root-composition'
                 }
               ]
-            }
+            },
             // #endif
+            {
+              id: 'slots',
+              name: '$slots',
+              children: [
+                {
+                  id: 'slots-options',
+                  name: '$slots 选项式 API',
+                  url: 'slots-options'
+                },
+                {
+                  id: 'slots-composition',
+                  name: '$slots 组合式 API',
+                  url: 'slots-composition'
+                }
+              ]
+            }
           ] as Page[]
         },
         {
@@ -229,13 +245,13 @@ export default {
               children: [
                 {
                   id: 'page-options',
-                  name: '页面生命周期（选项式）',
+                  name: '页面生命周期 选项式 API',
                   url: 'page-options'
                 },
 
                 {
                   id: 'page-composition',
-                  name: '页面生命周期（组合式）',
+                  name: '页面生命周期 组合式 API',
                   url: 'page-composition'
                 }
               ]
@@ -252,13 +268,13 @@ export default {
               children: [
                 {
                   id: 'keep-alive-options',
-                  name: 'keep-alive（选项式）',
+                  name: 'keep-alive 选项式 API',
                   url: 'keep-alive-options'
                 },
 
                 {
                   id: 'keep-alive-composition',
-                  name: 'keep-alive（组合式）',
+                  name: 'keep-alive 组合式 API',
                   url: 'keep-alive-composition'
                 }
               ]
@@ -269,13 +285,13 @@ export default {
               children: [
                 {
                   id: 'teleport-options',
-                  name: 'teleport（选项式）',
+                  name: 'teleport 选项式 API',
                   url: 'teleport-options'
                 },
 
                 {
                   id: 'teleport-composition',
-                  name: 'teleport（组合式）',
+                  name: 'teleport 组合式 API',
                   url: 'teleport-composition'
                 }
               ]
@@ -286,13 +302,13 @@ export default {
               children: [
                 {
                   id: 'component-options',
-                  name: 'component（选项式）',
+                  name: 'component 选项式 API',
                   url: 'component-options'
                 },
 
                 {
                   id: 'component-composition',
-                  name: 'component（组合式）',
+                  name: 'component 组合式 API',
                   url: 'component-composition'
                 }
               ]
@@ -303,13 +319,13 @@ export default {
               children: [
                 {
                   id: 'slots-options',
-                  name: 'slots（选项式）',
+                  name: 'slots 选项式 API',
                   url: 'slots-options'
                 },
 
                 {
                   id: 'slots-composition',
-                  name: 'slots（组合式）',
+                  name: 'slots 组合式 API',
                   url: 'slots-composition'
                 }
               ]
@@ -320,13 +336,13 @@ export default {
               children: [
                 {
                   id: 'template-options',
-                  name: 'template（选项式）',
+                  name: 'template 选项式 API',
                   url: 'template-options'
                 },
 
                 {
                   id: 'template-composition',
-                  name: 'template（组合式）',
+                  name: 'template 组合式 API',
                   url: 'template-composition'
                 }
               ]
@@ -339,7 +355,7 @@ export default {
           pages: [
             {
               id: 'render',
-              name: 'render Function（选项式）',
+              name: 'render Function 选项式 API',
               url: 'render/render'
             },
             {