From 807421b422e8e48f983f2188f30b97fc323828e9 Mon Sep 17 00:00:00 2001
From: "wuyb@phxg.cn" <wuyb@phxg.cn>
Date: Sun, 24 Apr 2022 18:07:54 +0800
Subject: [PATCH] vue3 - jsx

---
 vite-demo/README.md                           |  4 ++-
 vite-demo/src/router/backRouter.js            | 32 ++++++++++++++++++-
 .../src/views/skills/components/btn1.vue      | 18 +++++++++++
 .../src/views/skills/components/btn2.vue      | 16 ++++++++++
 .../src/views/skills/components/message.vue   | 24 ++++++++++++++
 .../src/views/skills/components/renderFn.js   | 15 +++++++++
 vite-demo/src/views/skills/vue3/fnApi.vue     | 29 +++++++++++++++++
 7 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 vite-demo/src/views/skills/components/btn1.vue
 create mode 100644 vite-demo/src/views/skills/components/btn2.vue
 create mode 100644 vite-demo/src/views/skills/components/message.vue
 create mode 100644 vite-demo/src/views/skills/components/renderFn.js
 create mode 100644 vite-demo/src/views/skills/vue3/fnApi.vue

diff --git a/vite-demo/README.md b/vite-demo/README.md
index 7492b94..9ceb285 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 db068fa..ae3c100 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 0000000..8420923
--- /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 0000000..b1e1610
--- /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 0000000..a2011a0
--- /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 0000000..1d39c6c
--- /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 0000000..0302c15
--- /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
-- 
GitLab