diff --git a/vite-demo/README.md b/vite-demo/README.md
index 7492b945ef1f35e33a1ec649ec0736013422b79e..9ceb2853a57577cceb36fcc3fc519b92aabfe44e 100644
--- a/vite-demo/README.md
+++ b/vite-demo/README.md
@@ -11,4 +11,6 @@ This template should help get you started developing with Vue 3 in Vite. The tem
 
 
 
-```
\ No newline at end of file
+```
+
+[vue3自定义指令](https://mp.weixin.qq.com/s/PZSbtcy8FEIITVqA9OYR2Q)
\ No newline at end of file
diff --git a/vite-demo/src/router/backRouter.js b/vite-demo/src/router/backRouter.js
index db068fa7de681d1b289f81d3fb238ea04d83fda7..ae3c100315651d7bef7a65bce1a237769b3e16d3 100644
--- a/vite-demo/src/router/backRouter.js
+++ b/vite-demo/src/router/backRouter.js
@@ -42,7 +42,7 @@ export default [
                 },
                 component: '/views/form/index.vue',
                 redirect: '/form/antdVue/antdForm',
-                children:[
+                children: [
                     {
                         path: 'antdForm',
                         name: 'antdForm',
@@ -129,5 +129,35 @@ export default [
                 component: '/views/tool/mdEditor.vue',
             },
         ]
+    },
+    {
+        path: '/skills',
+        name: 'skills',
+        meta: {
+            title: '知识点',
+        },
+        component: 'Layout',
+
+        children: [
+            {
+                path: 'vue3',
+                name: 'vue3',
+                title: 'vue3',
+                meta: {
+                    title: 'vue3',
+                },
+                component: '/views/form/index.vue',
+                children: [
+                    {
+                        path: 'fnApi',
+                        name: 'fnApi',
+                        meta: {
+                            title: 'vue3开发技巧',
+                        },
+                        component: '/views/skills/vue3/fnApi.vue',
+                    },
+                ]
+            },
+        ]
     }
 ]
diff --git a/vite-demo/src/views/skills/components/btn1.vue b/vite-demo/src/views/skills/components/btn1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84209234e6694356b2ea372998c8c3bb7de7a0a7
--- /dev/null
+++ b/vite-demo/src/views/skills/components/btn1.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>
+        这是btn1
+        <p>{{ num }}</p>
+        <slot></slot>
+        <slot name="name" :text="num"></slot>
+    </div>
+</template>
+<script>
+    import { ref, defineComponent } from 'vue'
+    export default defineComponent({
+        name: 'btn1',
+        setup() {
+            const num = ref(1)
+            return { num }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/vite-demo/src/views/skills/components/btn2.vue b/vite-demo/src/views/skills/components/btn2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1e1610e2db892cf6d4b580630f72a0b3cb07e75
--- /dev/null
+++ b/vite-demo/src/views/skills/components/btn2.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        这是btn2{{ num }}
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { ref, defineComponent } from 'vue'
+    export default defineComponent({
+        name: 'btn2',
+        setup() {
+            const num = ref(2)
+            return { num }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/vite-demo/src/views/skills/components/message.vue b/vite-demo/src/views/skills/components/message.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2011a02da8f261ae0d81f4a7477dd55f9751e59
--- /dev/null
+++ b/vite-demo/src/views/skills/components/message.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <div>{{num}}</div>
+        <div>这是一个弹窗</div>
+    </div>
+</template>
+
+<script>
+    import {ref} from 'vue'
+
+    export default {
+        name: "message",
+        setup() {
+            const num = ref(1)
+            return {
+                num
+            }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vite-demo/src/views/skills/components/renderFn.js b/vite-demo/src/views/skills/components/renderFn.js
new file mode 100644
index 0000000000000000000000000000000000000000..1d39c6cf9163c03a567a848c5ac93805684e89c0
--- /dev/null
+++ b/vite-demo/src/views/skills/components/renderFn.js
@@ -0,0 +1,15 @@
+import btn1 from './btn1.vue'
+import btn2 from './btn2.vue'
+import {h} from 'vue'
+
+export const renderFn = function (props, {slots}) {
+    console.log('renderFn', props);
+    console.log('renderFn', slots);
+    // 加载组件
+    // return props.type == 1 ? h(btn1) : h(btn2)
+    // 加载默认插槽 - 具名插槽
+    return props.type == 1 ? h(btn1, [slots.default(), slots.name({
+        text: props.type
+    })]) : h(btn2)
+}
+
diff --git a/vite-demo/src/views/skills/vue3/fnApi.vue b/vite-demo/src/views/skills/vue3/fnApi.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0302c15a5e7e1fd72d9b79993f9c8588bba38da6
--- /dev/null
+++ b/vite-demo/src/views/skills/vue3/fnApi.vue
@@ -0,0 +1,29 @@
+<template>
+    <div id="mask"></div>
+    <renderFn :type="1">
+        <p>默认插槽： 111111</p>
+        <template #name >
+          <span>具名插槽</span>  name
+        </template>
+    </renderFn>
+</template>
+
+<script>
+    import {renderFn} from '../components/renderFn.js'
+
+    console.log(renderFn);
+    export default {
+        name: "createVNode",
+        components: {
+            renderFn
+        },
+        setup(props, ctx) {
+            console.log(ctx);
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file