From ed06d6e677d112c52a164ef7953456a02b9f70bc Mon Sep 17 00:00:00 2001
From: dengtongyu <dengtongyu123@163.com>
Date: Thu, 30 Nov 2023 17:22:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                               |  2 +-
 src/components/ComponentA.vue             | 16 ++++++++++++++++
 src/components/ComponentB.vue             | 16 ++++++++++++++++
 src/components/ComponentC.vue             | 16 ++++++++++++++++
 src/installComponents.ts                  |  8 ++++++--
 src/router/routes.ts                      | 12 ++++++++++++
 src/views/component/GlobalComponent.vue   |  2 +-
 src/views/component/PartComponent.vue     |  6 +++---
 src/views/component/VarComponent.vue      | 16 ++++++++++++++++
 src/views/component/VarComponentAdvan.vue | 13 +++++++++++++
 10 files changed, 100 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ComponentA.vue
 create mode 100644 src/components/ComponentB.vue
 create mode 100644 src/components/ComponentC.vue
 create mode 100644 src/views/component/VarComponent.vue
 create mode 100644 src/views/component/VarComponentAdvan.vue

diff --git a/src/App.vue b/src/App.vue
index 1239a1c..ed60c58 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@
 import { RouterView } from "vue-router";
 import routes from "@/router/routes";
 import Layout from "./components/Layout.vue";
-// import VHeader from './components/VHeader.vue'
+import VHeader from "./components/VHeader.vue";
 import SideMenu from "./components/SideMenu.vue";
 </script>
 
diff --git a/src/components/ComponentA.vue b/src/components/ComponentA.vue
new file mode 100644
index 0000000..4227b60
--- /dev/null
+++ b/src/components/ComponentA.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        A组件
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+div {
+    border: 1px solid #e90606;
+    padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ComponentB.vue b/src/components/ComponentB.vue
new file mode 100644
index 0000000..228aa10
--- /dev/null
+++ b/src/components/ComponentB.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        B组件
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+div {
+    border: 1px solid #e9b806d6;
+    padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ComponentC.vue b/src/components/ComponentC.vue
new file mode 100644
index 0000000..e1d462e
--- /dev/null
+++ b/src/components/ComponentC.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        C组件
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+div {
+    border: 1px solid #1506e9;
+    padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/installComponents.ts b/src/installComponents.ts
index 63adbfb..d93b4ec 100644
--- a/src/installComponents.ts
+++ b/src/installComponents.ts
@@ -1,8 +1,12 @@
 import type { App } from "vue";
-import VHeader from "./components/VHeader.vue";
+import ComponentA from "./components/ComponentA.vue";
+import ComponentB from "./components/ComponentB.vue";
+// import ComponentC from "./components/ComponentC.vue";
 
 const install = function (app: App) {
-    app.component("VHeader", VHeader)
+    app.component("ComponentA", ComponentA);
+    app.component("ComponentB", ComponentB);
+    // app.component("ComponentC", ComponentC);
 };
 
 export {
diff --git a/src/router/routes.ts b/src/router/routes.ts
index fa1531c..bbf2890 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -123,6 +123,18 @@ const routes = [
         name: "partComponent", 
         meta: { title: "局部组件" }, 
         component: () => import("@/views/component/PartComponent.vue")
+      },
+      { 
+        path: "/component/var", 
+        name: "varComponent", 
+        meta: { title: "动态组件" }, 
+        component: () => import("@/views/component/VarComponent.vue")
+      },
+      { 
+        path: "/component/varadvan", 
+        name: "varComponentAdvan", 
+        meta: { title: "动态组件" }, 
+        component: () => import("@/views/component/VarComponentAdvan.vue")
       }
     ]
   }
diff --git a/src/views/component/GlobalComponent.vue b/src/views/component/GlobalComponent.vue
index f9a8654..3b2b00a 100644
--- a/src/views/component/GlobalComponent.vue
+++ b/src/views/component/GlobalComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <VHeader />
+        <ComponentA />
     </div>
 </template>
 
diff --git a/src/views/component/PartComponent.vue b/src/views/component/PartComponent.vue
index 8e8347f..0511c81 100644
--- a/src/views/component/PartComponent.vue
+++ b/src/views/component/PartComponent.vue
@@ -1,13 +1,13 @@
 <template>
     <div>
-
+        <ComponentC />
     </div>
 </template>
 
 <script setup lang="ts">
-
+import ComponentC from "@/components/ComponentC.vue";
 </script>
 
-<style scoped>
+<style scoped lang="less">
 
 </style>
\ No newline at end of file
diff --git a/src/views/component/VarComponent.vue b/src/views/component/VarComponent.vue
new file mode 100644
index 0000000..1f22b3a
--- /dev/null
+++ b/src/views/component/VarComponent.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <component :is="ComponentC" />
+        <component :is="ComponentA" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import ComponentC from "@/components/ComponentC.vue";
+const ComponentA = "ComponentA";
+console.log(ComponentC);
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/component/VarComponentAdvan.vue b/src/views/component/VarComponentAdvan.vue
new file mode 100644
index 0000000..6e80d59
--- /dev/null
+++ b/src/views/component/VarComponentAdvan.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file