From 3c23dcbd94ce758ebbe249fd10d48d245c90d099 Mon Sep 17 00:00:00 2001
From: u014071104 <u014071104@devide>
Date: Fri, 30 Aug 2024 00:37:28 +0800
Subject: [PATCH] Auto Commit

---
 src/App.vue       | 71 +++++++++++++++++++----------------------------
 src/ChildOne.vue  | 26 +++++++++++++++++
 src/ChildTwo.vue  | 24 ++++++++++++++++
 src/ParentOne.vue | 30 ++++++++++++++++++++
 src/ParentTwo.vue | 30 ++++++++++++++++++++
 5 files changed, 139 insertions(+), 42 deletions(-)
 create mode 100644 src/ChildOne.vue
 create mode 100644 src/ChildTwo.vue
 create mode 100644 src/ParentOne.vue
 create mode 100644 src/ParentTwo.vue

diff --git a/src/App.vue b/src/App.vue
index 633a5df..4678c89 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,34 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import ParentOne from './ParentOne.vue';
+import ParentTwo  from './ParentTwo.vue';
+import ChildOne  from './ChildOne.vue';
+import ChildTwo from './ChildTwo.vue';
+import {shallowRef} from "vue"
+const parentCom=shallowRef(ParentOne)
+const ChildCom=shallowRef(ChildOne)
+var parent=1;
+var child=1;
+const changeParent=()=>{
+  parent=parent==1?2:1
+  parentCom.value=parent==1?ParentOne:ParentTwo;
+}
+const changeChild=()=>{
+   child=child==1?2:1
+  ChildCom.value=child==1?ChildOne:ChildTwo;
+}
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <button @click="changeParent">改父组件</button>
+    <button @click="changeChild">改子组件</button>
+ <Suspense>
+  <component :is="parentCom">
+    <Suspense> 
+      <keep-alive>
+          <component :is="ChildCom" />
+      </keep-alive>
+    
+    </Suspense>
+  </component>
+</Suspense>
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/src/ChildOne.vue b/src/ChildOne.vue
new file mode 100644
index 0000000..4318050
--- /dev/null
+++ b/src/ChildOne.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="about">
+      <h1>子组件一 {{ count }}</h1>
+      <button @click="count++">++</button>
+    </div>
+  </template>
+  <script setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+  const count=ref(0)
+  onMounted(()=>{
+      console.log("子组件一挂载")
+  })
+  onBeforeUnmount(()=>{
+      console.error("子组件一卸载")
+  })
+  </script>
+  
+  <style scoped>
+  .about{
+      width: 200px;
+     background-color: pink;
+      
+  }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/src/ChildTwo.vue b/src/ChildTwo.vue
new file mode 100644
index 0000000..7d45aad
--- /dev/null
+++ b/src/ChildTwo.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="about">
+      <h1>子组件two</h1>
+    </div>
+  </template>
+  <script setup>
+  import { onBeforeUnmount, onMounted } from 'vue';
+  
+  onMounted(()=>{
+      console.log("子组件二挂载")
+  })
+  onBeforeUnmount(()=>{
+       console.error("子组件二卸载")
+  })
+  </script>
+  <style scoped>
+  .about{
+      width: 200px;
+     background-color: palegoldenrod;
+      
+  }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/src/ParentOne.vue b/src/ParentOne.vue
new file mode 100644
index 0000000..222627c
--- /dev/null
+++ b/src/ParentOne.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="about">
+      <h1>父组件一</h1>
+      <slot/>
+    </div>
+  </template>
+  <script setup>
+  import { onBeforeUnmount, onMounted } from 'vue';
+  
+  onMounted(()=>{
+      console.log("父组件一挂载")
+  })
+  onBeforeUnmount(()=>{
+      console.error("父组件一卸载")
+  })
+  </script>
+  
+  <style scoped>
+  .about{
+      width: 300px;
+      border:1px solid blue;
+       background-color: pink;
+      
+  }
+  h1{
+      width: 100%;
+      background-color: pink;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/ParentTwo.vue b/src/ParentTwo.vue
new file mode 100644
index 0000000..674b308
--- /dev/null
+++ b/src/ParentTwo.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="about">
+      <h1>父组件二</h1>
+      <slot/>
+    </div>
+  </template>
+  <script setup>
+  import { onBeforeUnmount, onMounted } from 'vue';
+  
+  onMounted(()=>{
+      console.log("父组件二挂载")
+  })
+  onBeforeUnmount(()=>{
+      console.error("父组件二卸载")
+  })
+  </script>
+  
+  <style scoped>
+  .about{
+      width: 300px;
+      border:1px solid red;
+       background-color: palegoldenrod;
+      
+  }
+  h1{
+      width: 100%;
+      background-color: palegoldenrod;
+  }
+  </style>
+  
\ No newline at end of file
-- 
GitLab