Wed Jun 7 10:35:00 UTC 2023 inscode

src/App.vue

@@ -3,32 +3,22 @@
     <h1>App 根组件</h1>
     <hr />
 
-    <button @click="currentComponent = 'Left'">展示左组件</button>
-    <button @click="currentComponent = 'Right'">展示右组件</button>
-    <div class="box">
-      <!-- 渲染 Left 组件和 Right 组件 -->
-     
-      <KeepAlive exclude="myRight">
-
-        <component :is="currentComponent"></component>
-      </KeepAlive>
 
+    <div class="box">
+      <Left>
+        <p> 内容会被丢弃 </p>
+      </Left>
     </div>
   </div>
 </template>
 
 <script>
-import Left from './components/Left.vue';
-import Right from './components/Right.vue';
+import Left from './components/Left.vue'
+
 export default {
-  data() {
-    return {
-      currentComponent: '',
-    }
-  },
+
   components: {
     Left,
-    Right
   }
 }
 </script>

src/components/Left.vue

@@ -2,9 +2,7 @@
   <div class="left-container">
     <h3>Left 组件</h3>
 
-    <p>计数器的值为:  {{ count }}</p>
-    <button @click="count+=1">+1</button>
-    
+    <slot></slot>
   </div>
 </template>
 
@@ -15,7 +13,7 @@ export default {
       count:0,
     }
   },
-  name:'myLeft',
+  name:'MyLeft',
 
 }
 </script>

src/components/Right.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name:'myRight'
+  name:'MyRight'
 }
 </script>