页面教学设计

zhandianxinxi/光谱数据监控/src/App.vue

@@ -129,7 +129,7 @@
 <!--          </div>-->
 <!--        </div>-->
 <!--      </div>-->
-      <sidevueold></sidevueold>
+      <sidevueold ref="siderold"></sidevueold>
     </el-drawer>
   </div>
 </template>
@@ -270,10 +270,21 @@ const hideSelected = () => {
     ElMessage.info('选中的设备已在屏蔽列表中')
   }
 }
-
+const siderold = ref(null)
+var tempdata=0
 const showDetails = (row) => {
   activeDevice.value = row
   drawerVisible.value = true
+  nextTick(() => {
+    // 此时 siderold.value 才有值
+    // 使用 ?. 防止极个别情况下组件未挂载导致的报错
+    if (siderold.value) {
+      siderold.value.loaddata(row)
+      tempdata++;
+    } else {
+      console.warn("子组件尚未挂载")
+    }
+  })
 }
 
 // --- 过滤与排序 ---

zhandianxinxi/光谱数据监控/src/sidevueold.vue

@@ -1,20 +1,36 @@
 <script>
 import {DataLine} from "@element-plus/icons-vue";
-
+import axios from 'axios'
 export default {
   name: "sidevueold",
   components: {DataLine},
   data(){
    return{
      activeDevice:{},
+     bbb:0,
+     date:"2022-10-11"
+
 
    }
   },
   mounted() {
     console.log("hello from 111")
   },
-  
+  props:{
+    id:0
+  },
   methods:{
+    loaddata(a){
+      this.bbb=a;
+      console.log(a);
+
+    },
+    loadhistorydata(){
+      var dateselect=this.date;
+      //去后端获取数据 getdata(dateselect)
+      console.log("im getting data form back "+dateselect)
+
+    }
 
   },
   unmounted() {
@@ -24,6 +40,9 @@ export default {
 </script>
 
 <template>
+  <input type="date" v-model="date"/>
+  <button @click="loadhistorydata">获取历史数据</button>
+  {{bbb}}
 <!--  <div v-if="activeDevice" class="drawer-content">-->
 <!--    <div class="info-banner">-->
 <!--      <el-descriptions :column="isMobile ? 1 : 4" border size="small">-->
@@ -52,7 +71,7 @@ export default {
 <!--      </div>-->
 <!--    </div>-->
 <!--  </div>-->
-  aaaaaa
+
 </template>
 
 <style scoped>