diff --git a/pages.json b/pages.json
index 0ea0937c0522eb727a03ab488944e259aba4d9b1..c6b36af0a2ad4ccf75482e5715b87f4deb39d985 100644
--- a/pages.json
+++ b/pages.json
@@ -265,14 +265,18 @@
         "navigationBarTitleText": "defineModel"
       }
     },
-
-
     {
-      "path": "pages/directive/v-slot/v-slot",
+      "path": "pages/directive/v-slot/v-slot-options",
       "style": {
         "navigationBarTitleText": "v-slot"
       }
     },
+    {
+      "path": "pages/directive/v-slot/v-slot-composition",
+      "style": {
+        "navigationBarTitleText": "defineSlots"
+      }
+    },
     {
       "path": "pages/component-instance/slots/slots-options",
       "style": {
diff --git a/pages/directive/v-slot/Foo-composition.uvue b/pages/directive/v-slot/Foo-composition.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..b5628563913ee266a158ca631be0ce08e5be49b0
--- /dev/null
+++ b/pages/directive/v-slot/Foo-composition.uvue
@@ -0,0 +1,19 @@
+<template>
+  <view>
+    <slot name="header" :msg="msg"></slot>
+    <slot :num="num"></slot>
+    <slot name="footer" :arr="arr"></slot>
+  </view>
+</template>
+
+<script setup lang='uts'>
+  const msg = ref('foo msg')
+  const num = ref<number>(0)
+  const arr = ref<string[]>(['a', 'b', 'c'])
+
+  defineSlots<{
+    header(props : { msg : string }) : any,
+    default(props : { num : number }) : any,
+    footer(props : { arr : string[] }) : any
+  }>()
+</script>
diff --git a/pages/directive/v-slot/Foo-options.uvue b/pages/directive/v-slot/Foo-options.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..e2ab869c84f4e72ce5462ee21c627fdcd2547255
--- /dev/null
+++ b/pages/directive/v-slot/Foo-options.uvue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <slot name="header" :msg="msg"></slot>
+    <slot :num="num"></slot>
+    <slot name="footer" :arr="arr"></slot>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    slots: Object as SlotsType<{
+      header: { msg: string }
+      default: { num: number }
+      footer: { arr: string[] }
+    }>,
+    data(){
+      return {
+        msg: 'foo msg',
+        num: 0,
+        arr: ['a','b', 'c']
+      }
+    }
+  }
+</script>
diff --git a/pages/directive/v-slot/counter.uvue b/pages/directive/v-slot/counter.uvue
deleted file mode 100644
index 9cf32d7cfb21314cc89383cc41c980ab0766f766..0000000000000000000000000000000000000000
--- a/pages/directive/v-slot/counter.uvue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <view>
-    <slot />
-    <!-- <slot :loading="loading" :error="message" /> -->
-  </view>
-</template>
-
-<script>
-  export default {
-    props: {
-      number: {
-        type: Number,
-        default: 0
-      }
-    },
-    data() {
-      return {
-        loading: false,
-        message: ''
-      }
-    },
-    created() {
-    },
-    methods: {
-    }
-  }
-</script>
\ No newline at end of file
diff --git a/pages/directive/v-slot/v-slot-composition.uvue b/pages/directive/v-slot/v-slot-composition.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..bdeffe3a2bc041be55d1b33e6cb5744d6e423b50
--- /dev/null
+++ b/pages/directive/v-slot/v-slot-composition.uvue
@@ -0,0 +1,28 @@
+<template>
+  <view class="page">
+    <Foo>
+      <template #header="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>header slot msg:</text>
+          <text id="slot-header">{{ msg }}</text>
+        </view>
+      </template>
+      <template #default="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>default slot num:</text>
+          <text id="slot-default">{{ num }}</text>
+        </view>
+      </template>
+      <template #footer="{ arr }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>footer slot arr:</text>
+          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
+        </view>
+      </template>
+    </Foo>
+  </view>
+</template>
+
+<script setup lang="uts">
+import Foo from './Foo-composition.uvue'
+</script>
diff --git a/pages/directive/v-slot/v-slot-options.uvue b/pages/directive/v-slot/v-slot-options.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..02a9e2480512b5be55be932596f939c69acf5a89
--- /dev/null
+++ b/pages/directive/v-slot/v-slot-options.uvue
@@ -0,0 +1,31 @@
+<template>
+  <view class="page">
+    <Foo>
+      <template #header="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>header slot msg:</text>
+          <text id="slot-header">{{ msg }}</text>
+        </view>
+      </template>
+      <template #default="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>default slot num:</text>
+          <text id="slot-default">{{ num }}</text>
+        </view>
+      </template>
+      <template #footer="{ arr }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>footer slot arr:</text>
+          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
+        </view>
+      </template>
+    </Foo>
+  </view>
+</template>
+
+<script lang="uts">
+import Foo from './Foo-options.uvue'
+export default {
+  components: {Foo}
+}
+</script>
diff --git a/pages/directive/v-slot/v-slot.test.js b/pages/directive/v-slot/v-slot.test.js
index 93ce35ca6fc9a9f52e3f3abc44491a92a13af779..bce6e0bf5bbaa36ae37edcf4a412ebd8531d502e 100644
--- a/pages/directive/v-slot/v-slot.test.js
+++ b/pages/directive/v-slot/v-slot.test.js
@@ -1,13 +1,28 @@
-const PAGE_PATH = '/pages/directive/v-slot/v-slot'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-slot/v-slot-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-slot/v-slot-composition'
 
 describe('v-slot', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
+  
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
+    await page.waitFor('view')
+    
+    const slotHeader = await page.$('#slot-header')
+    expect(await slotHeader.text()).toBe('foo msg')
+
+    const slotContent = await page.$('#slot-default')
+    expect(await slotContent.text()).toBe('0')
+
+    const slotFooter = await page.$('#slot-footer')
+    expect(await slotFooter.text()).toBe('["a","b","c"]')
+  }
+  
+  it('v-slot', async () => {
+    await test(OPTIONS_PAGE_PATH)
   })
-  it('default', async () => {
-    const defaultText = await page.$('.default')
-    expect(await defaultText.text()).toBe('loading')
+  
+  it('defineSlots', async () => {
+    await test(COMPOSITION_PAGE_PATH)
   })
 })
diff --git a/pages/directive/v-slot/v-slot.uvue b/pages/directive/v-slot/v-slot.uvue
deleted file mode 100644
index 8bbc5a0b22500f4daf4a57de56a61e69d39b9f9e..0000000000000000000000000000000000000000
--- a/pages/directive/v-slot/v-slot.uvue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <view class="page">
-    <view class="split-title">v-slot</view>
-    <counter class="default" v-slot:default>loading</counter>
-  </view>
-</template>
-
-<script>
-  import counter from "./counter.uvue"
-  export default {
-    components: {
-      counter
-    },
-    data() {
-      return {
-      }
-    },
-    methods: {
-    }
-  }
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index e9ae52901cbb7c4a35e5efc828b4aba474c0c182..54ddc7b615691cbe14f09ccef638b7c4f781982e 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -822,6 +822,22 @@ export default {
                 },
               ]
             },
+            {
+              id: 'v-slot',
+              name: 'v-slot',
+              children: [
+                {
+                  id: 'v-model-options',
+                  name: 'v-slot',
+                  url: 'v-slot-options',
+                },
+                {
+                  id: 'v-slot-composition',
+                  name: 'defineSlots',
+                  url: 'v-slot-composition',
+                },
+              ]
+            },
           ]
         },
         {