feat:更新

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>
 

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>

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>

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>

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 {

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")
       }
     ]
   }

src/views/component/GlobalComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <VHeader />
+        <ComponentA />
     </div>
 </template>
 

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>

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>

src/views/component/VarComponentAdvan.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>