src/components/JHeap.vue

@@ -6,7 +6,7 @@
         <v-btn v-for="item of objects" :key="item.id" block text :color="item.fresh ? 'red' : 'black'"
                @click="handleClickDetail(item)">
           <div class="button-text">{{item.id}}</div>
-          <v-icon v-if="item.id === itemNowId" color="blue" right>mdi-check</v-icon>
+          <v-icon v-if="item === displayNow" color="blue" right>mdi-search</v-icon>
         </v-btn>
       </template>
     </div>
@@ -20,15 +20,16 @@ export default {
     objects: {
       default: () => [],
       type: Array
+    },
+    displayNow: {
+      type: Object,
+      default: () => ({})
     }
   },
   methods: {
     handleClickDetail ({ detail }) {
       this.itemNowId = detail.id
-      this.$emit('click-detail', {
-        detail,
-        component: 'j-heap-detail'
-      })
+      this.$emit('click-detail', detail)
     }
   }
 }

src/components/JMethod.vue

@@ -6,7 +6,7 @@
         <v-btn v-for="item of methods" :key="item.className" block text :color="item.fresh ? 'red' : 'black'"
                @click="handleClickDetail(item)">
           <div class="button-text">{{item.className}}</div>
-          <v-icon v-if="item.className === itemNowId" color="blue" right>mdi-check</v-icon>
+          <v-icon v-if="item === displayNow" color="blue" right>mdi-arrow-left</v-icon>
         </v-btn>
       </template>
     </div>
@@ -20,6 +20,10 @@ export default {
     methods: {
       type: Array,
       default: () => []
+    },
+    displayNow: {
+      type: Object,
+      default: () => ({})
     }
   },
   data () {
@@ -30,10 +34,7 @@ export default {
   methods: {
     handleClickDetail (detail) {
       this.itemNowId = detail.className
-      this.$emit('click-detail', {
-        detail,
-        component: 'j-method-detail'
-      })
+      this.$emit('click-detail', detail)
     }
   }
 }

src/components/JThread.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
     <h3>线程栈</h3>
+    {{displayNow}}
     <div class="j-container">
       <template v-if="threadStack !== null">
         <v-btn v-for="item of threadStack" :key="item.methodName" block text :color="item.fresh ? 'red' : 'black'"
                @click="handleClickDetail(item)">
           <div class="button-text">{{item.methodName}}</div>
-          <v-icon v-if="item.methodName === itemNowId" color="blue" right>mdi-check</v-icon>
+          <v-icon v-if="item === displayNow" color="blue" right>mdi-arrow-left</v-icon>
         </v-btn>
       </template>
     </div>
@@ -20,20 +21,15 @@ export default {
     threadStack: {
       type: Array,
       default: () => []
-    }
-  },
-  data () {
-    return {
-      itemNowId: null
+    },
+    displayNow: {
+      type: Object,
+      default: () => ({})
     }
   },
   methods: {
     handleClickDetail (detail) {
-      this.itemNowId = detail.methodName
-      this.$emit('click-detail', {
-        detail,
-        component: 'j-thread-detail'
-      })
+      this.$emit('click-detail', detail)
     }
   }
 }

src/views/JVVM.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="jvvm">
-    <j-heap class="heap" :objects="state.memory?state.memory.objects:[]"
+    <j-heap class="heap" :objects="state.memory?state.memory.objects:[]" :display-now="detail"
             @click-detail="handleCheckDetail($event, 'j-heap-detail')"></j-heap>
-    <j-method class="method" :methods="state.memory?state.memory.classes:[]"
+    <j-method class="method" :methods="state.memory?state.memory.classes:[]" :display-now="detail"
               @click-detail="handleCheckDetail($event, 'j-method-detail')"></j-method>
-    <j-thread class="thread" :thread-stack="state.thread?state.thread.threadStack:[]"
+    <j-thread class="thread" :thread-stack="state.thread?state.thread.threadStack:[]" :display-now="detail"
               @click-detail="handleCheckDetail($event, 'j-thread-detail')"></j-thread>
     <component class="detail" :is="detailComponent" :data="detail"></component>
     <div class="other-info">