为组件增加key值以在屏幕尺寸变化时强制更新组件

src/components/lunbo.vue

@@ -64,7 +64,7 @@ export default {
   },
   beforeDestroy() {
     this.$refs[this.id].swiper.destroy();
-  }
+  },
 };
 </script>
 

src/views/Home.vue

@@ -15,6 +15,7 @@
         :data="topItem"
         class="top"
         @openIframe="openIframe"
+        :key="updateAbove"
       />
       <lunbo
         v-if="active && reInit"
@@ -24,6 +25,7 @@
         :data="bottomItem"
         @openIframe="openIframe"
         :isReverse="true"
+        :key="updateBelow"
       />
     </div>
 
@@ -78,6 +80,9 @@ export default {
       iframeUrl: "",
       name: "",
       reInit: true,
+      updateAbove:0,
+      updateBelow:0,
+
     };
   },
   methods: {
@@ -112,6 +117,11 @@ export default {
           this.reInit = true;
         });
       });
+      window.addEventListener("resize", () => {
+        console.log('resize');
+        this.updateAbove +=1;
+        this.updateBelow +=2;
+      });
     });
   },
 };