123

src/components/Tabs/index.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   isCase: Boolean,
 })
 const { industry_id, hardware_id } = storeToRefs(detailStore)
-
+const myEmit = defineEmits(['onMySonFunc'])
 const isActive = id => {
   return props.isCase
     ? detailStore.industry_id == id
@@ -31,6 +31,7 @@ const updateActiveTab = id => {
   if (props.isCase) {
     detailStore.updateIndustryId(id)
     detailStore.updateExampleId('1')
+    myEmit('onMySonFunc')
   } else {
     detailStore.updateHardwareId(id)
     detailStore.updateHardwareExampleId('1')

src/components/Trumbs/index.vue

@@ -45,12 +45,14 @@ import { FreeMode } from 'swiper'
 
 const detailStore = useDetailStore()
 const { industry_id, hardware_id } = storeToRefs(detailStore)
+const myEmit = defineEmits(['onMySonFunc'])
 const props = defineProps({
   isCase: Boolean,
 })
 const modules = ref([FreeMode])
 const viewDetail = index => {
   if (props.isCase) {
+    myEmit('onMySonFunc')
     detailStore.updateExampleId(index)
   } else {
     detailStore.updateHardwareExampleId(index)

src/views/Index/components/CaseDetails/index.vue

@@ -4,8 +4,8 @@
     <div class="flex_center" id="case_detail_container_flex_center">
       <div class="case_detail_container" id="case_detail_container">
         <div class="content">
-          <Tabs :isCase="true" />
-          <Trumbs :isCase="true" />
+          <Tabs @onMySonFunc="funcToSon" :isCase="true" />
+          <Trumbs @onMySonFunc="funcToSon" :isCase="true" />
           <div class="content_detail">
             <div class="left_swiper">
               <div class="header_intro">
@@ -16,7 +16,7 @@
                   }}
                 </p>
               </div>
-              <div class="case_swiper_wrap">
+              <div class="case_swiper_wrap" :key="componentKey">
                 <swiper
                   :pagination="true"
                   :modules="modules"
@@ -41,6 +41,7 @@
                 v-on:mouseover="mouseover"
                 v-on:mouseleave="mouseleave"
                 @scroll="handleScroll"
+                :key="componentKey"
               >
                 <div class="detail_header">
                   <div>详情页</div>
@@ -129,6 +130,13 @@ const modules = ref([Pagination])
 const detailStore = useDetailStore()
 const swiperStore = useSwiperStore()
 const { industry_id, example_id } = storeToRefs(detailStore)
+const componentKey = ref(0)
+const forceRerender = () => {
+  componentKey.value = 1 + componentKey.value
+}
+const funcToSon = () => {
+  forceRerender()
+}
 onMounted(() => {
   const func = () => {
     handleScreenAuto('#case_detail_container')