基本事件

src/App.vue

@@ -32,6 +32,7 @@
     <v-content class="pt-0">
       <v-container fluid>
         <j-v-v-m :state="currentState" :current-state-index="currentStateIndex"
+                 :current-code-data="currentExample.raw"
                  :total-state-length="states.length" @onNextFrame="handleNextFrame"
                  @onPreFrame="handlePreFrame"
         ></j-v-v-m>

src/components/JHeap.vue

@@ -4,7 +4,18 @@
 
 <script>
 export default {
-  name: 'JHeap'
+  name: 'JHeap',
+  props: {
+    objects: {
+      default: () => [],
+      type: Array
+    }
+  },
+  methods: {
+    handleClickDetail() {
+      this.$emit('click-detail')
+    }
+  }
 }
 </script>
 

src/components/JMethod.vue

@@ -4,7 +4,18 @@
 
 <script>
 export default {
-  name: 'JMethod'
+  name: 'JMethod',
+  props: {
+    methods: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleClickDetail() {
+      this.$emit('click-detail')
+    }
+  }
 }
 </script>
 

src/components/JThread.vue

@@ -5,9 +5,16 @@
 <script>
 export default {
   name: 'JThread',
-  prop: {
-    data: Object,
-    required: true
+  props: {
+    threadStack: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleClickDetail() {
+      this.$emit('click-detail')
+    }
   }
 }
 </script>

src/views/JVVM.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="jvvm">
-    <j-heap class="heap"></j-heap>
-    <j-method class="method"></j-method>
-    <j-thread class="thread"></j-thread>
-    <component class="detail" :is="detailComponent"></component>
+    <j-heap class="heap" :objects="state.memory.objects"
+            @click-detail="handleCheckDetail($event, 'j-heap-detail')"></j-heap>
+    <j-method class="method" :objects="state.memory.classes"
+              @click-detail="handleCheckDetail($event, 'j-method-detail')"></j-method>
+    <j-thread class="thread" :objects="state.thread.threadStack"
+              @click-detail="handleCheckDetail($event, 'j-thread-detail')"></j-thread>
+    <component class="detail" :is="detailComponent" :data="detail"></component>
     <div class="other-info">
       info
     </div>
@@ -45,7 +48,8 @@ export default {
       default: () => ({
         currentFrame: { code: [] },
         optionalNextFrame: {},
-        memory: { objects: [] }
+        memory: { objects: [], classes: [] },
+        thread: { threadStack: [] }
       }),
       type: Object
     },
@@ -53,6 +57,10 @@ export default {
       default: 0,
       type: Number
     },
+    currentCodeData: {
+      default: () => [],
+      type: Array
+    },
     totalStateLength: {
       default: 0,
       type: Number
@@ -60,10 +68,16 @@ export default {
   },
   data () {
     return {
-      detailComponent: 'j-thread-detail'
+      detailComponent: 'j-thread-detail',
+      detail: {},
+      showSource: false
     }
   },
   methods: {
+    handleCheckDetail(detail, component) {
+      this.detail = detail
+      this.detailComponent = component
+    },
     goNextFrame () {
       this.$emit('onNextFrame')
     },