現(xiàn)有一個(gè)需求如下

 

點(diǎn)擊“存包記錄”，出現(xiàn)彈窗（如下圖） ，通過上圖傳過來的參數(shù)：訂單id ，查詢出來彈窗中的列表， 列表數(shù)據(jù)來自另一張表，與上圖數(shù)據(jù)的表 關(guān)聯(lián)）

 

 該需求實(shí)現(xiàn)一個(gè)主從詳情視圖。點(diǎn)擊父列表中的一個(gè)“存包記錄”按鈕。出現(xiàn)一個(gè)模態(tài)彈窗。彈窗中的列表顯示與所點(diǎn)擊行相關(guān)的記錄。該相關(guān)列表的數(shù)據(jù)來自一個(gè)與父列表不同的數(shù)據(jù)庫(kù)表。這兩個(gè)表由一個(gè)主鍵/外鍵關(guān)系（orderId）連接。 

技術(shù)思路梳理

Vue 父子組件通信的經(jīng)典“自上而下傳遞 Props，自下而上觸發(fā) Events”模式中的前半部分。

第1步：父組件 - 觸發(fā)與狀態(tài)管理

  1. 觸發(fā)事件：在父組件的表格中，點(diǎn)擊“存包記錄”按鈕，通過 @click="storeRecords(scope.row)" 將當(dāng)前行的整個(gè)數(shù)據(jù)對(duì)象 row 傳遞給 storeRecords 方法。
  2. 準(zhǔn)備數(shù)據(jù)：在 storeRecords 方法中，從 row 對(duì)象中解構(gòu)出關(guān)鍵的 orderId (this.orderId = row.orderId)，并將其賦值給父組件 data 中的變量 orderId。
  3. 展示子組件：通過設(shè)置 this.storeRecordOpen = true 打開彈窗，彈窗內(nèi)渲染的是子組件 <LockerRecord>。

第2步：父組件 -> 子組件 - 數(shù)據(jù)傳遞（Props）

這是最關(guān)鍵的橋梁。

<!-- 父組件 -->
<el-dialog>
  <!-- 將父組件 data 中的 orderId，作為名為 "orderId" 的 prop 傳遞給子組件 -->
  <LockerRecord :orderId="orderId"></LockerRecord> 
</el-dialog>
  • :orderId="orderId" 的含義是：將父組件的 orderId 變量，綁定到子組件的 orderId prop上。這是一個(gè)動(dòng)態(tài)綁定，當(dāng)父組件的 orderId 變化時(shí)，子組件會(huì)接收到新的值。

第3步：子組件 - 接收與響應(yīng)（Props + Watch）

這是你方案中最精彩的部分，完美地解決了數(shù)據(jù)異步更新的問題。

  1. 聲明接收：在子組件 LockerRecord.vue 中，通過 props: ['orderId'] 聲明：“我期望接收一個(gè)名為 orderId 的數(shù)據(jù)”。
  2. 監(jiān)聽變化并響應(yīng)：
    • 為什么需要 watch？因?yàn)樽咏M件創(chuàng)建時(shí)，orderId 這個(gè) prop 可能還沒有從父組件傳遞過來（或者傳遞的是初始空值）。直接在 created() 鉤子里調(diào)用 getList() 可能會(huì)拿錯(cuò)參數(shù)。
    • watch 就像一個(gè)哨兵，專門監(jiān)視 orderId 這個(gè) prop。
    • immediate: true：這是點(diǎn)睛之筆。它告訴 watch：“在創(chuàng)建好監(jiān)視任務(wù)后，立即執(zhí)行一次 handler”。這確保了即使 orderId 在組件創(chuàng)建后很快就有了值，也能被立刻捕獲并執(zhí)行查詢。
    • handler(newVal, oldVal)：當(dāng) orderId 發(fā)生變化時(shí)，這個(gè)函數(shù)被調(diào)用。newVal 就是從父組件傳來的最新的 orderId。
    • this.newOrderId = newVal; this.getList()：你將新值賦給一個(gè)內(nèi)部變量 newOrderId，然后調(diào)用 getList() 進(jìn)行數(shù)據(jù)查詢。這個(gè)流程非常穩(wěn)健。

第4步：子組件 -> 后端 -> 子組件 - 數(shù)據(jù)查詢與渲染

  1. 發(fā)起請(qǐng)求：子組件的 getList() 方法調(diào)用 API 函數(shù) getRecord(this.newOrderId)，將監(jiān)聽到的新 orderId 發(fā)送給后端。
  2. 后端處理：后端接收到 orderId，作為 @PathVariable 查詢關(guān)聯(lián)表，并返回對(duì)應(yīng)的存包記錄列表。
  3. 前端渲染：子組件接收到后端返回的數(shù)據(jù)，更新 list 和 total，<el-table> 自動(dòng)根據(jù) list 的數(shù)據(jù)完成渲染。

總結(jié)：核心任務(wù)是創(chuàng)建一個(gè)父子組件間的交互，其中一個(gè)組件（父組件）持有一個(gè)按鈕列表，點(diǎn)擊這些按鈕會(huì)打開一個(gè)彈窗（子組件），其中包含一個(gè)需要基于來自父組件的ID來獲取數(shù)據(jù)的表格。