vue3 - jsx

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

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',
+                    },
+                ]
+            },
+        ]
     }
 ]

vite-demo/src/views/skills/components/btn1.vue

+<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

vite-demo/src/views/skills/components/btn2.vue

+<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

vite-demo/src/views/skills/components/message.vue

+<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

vite-demo/src/views/skills/components/renderFn.js

+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)
+}
+

vite-demo/src/views/skills/vue3/fnApi.vue

+<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