晚上做了一個頁面，想要的效果是一個表格里每一行數據點擊最后一列操作按鈕可以點擊打開彈窗，顯示這一行數據的詳情信息。
根據需求，為了簡化代碼決定用父子組件，將dialog封裝成子組件在表格里使用。
1、一開始正常邏輯，將決定彈窗開關的visible值放在子組件，以及子組件頁面數據請求編寫，利用ref從父組件中調用改變visible值和調用函數，過程很順利，表格第一頁每行數據測試點擊按鈕彈窗都能打開關閉正常，但是我將表格翻頁到第二頁繼續測試此功能，開始不對勁了，第一頁的所有數據都打開彈窗正常，但到了第二頁點擊按鈕打不開彈窗，查報錯發現父組件里的ref調用子組件的東西通通沒拿到，就是報undefined錯誤，一臉懵，不知道哪里有問題，按理說分頁功能只是改變了表格渲染的數據而已，前前后后檢查了一個小時沒發現問題，網上查資料有博主說是頁面渲染順序問題，也就是點按鈕時子組件頁面還沒渲染出來，所以取不到值，使用延遲加載和$nextTick就能解決問題雲雲，我先是嘗試了一下然並卵。后來想了一下感覺自己應該也不是這個問題，畢竟第一頁的彈窗都正常顯示出來了，不管怎么嘗試反正父組件怎么也拿不到子組件的值，這期間又浪費我起碼三個小時。。
2、我一邊被這個bug整的崩潰眼見天快亮了也沒解決焦躁的不行，一邊不停的嘗試在網上查找有沒有相似的問題，后來不知道什么時候突然開竅想到了既然父組件拿不到子組件的數據，那我可以把所有東西放在父組件，父組件的數據傳遞給子組件呀。后面主要修改的是講子組件的數據請求函數移到父組件，切換彈窗開關也在父組件，通過props傳給子組件再渲染，一開始圖方便父子組件一些傳遞的數據名稱用了同樣的名字，不知道為什么子組件里直接給卡住識別不出來，數據渲染不成功，后來將父子組件傳遞的數據名稱改為不一樣的就正常顯示了，至今不知道為啥。
父組件中使用彈窗子組件：
父組件變量：
數據請求參數（父組件中）：
子組件獲取父組件傳來的數據：
剩下的就是類似變量的用法使用父組件傳來的數據。
3、上面改完后測試發現彈窗可以正常打開了，包括第二頁的數據點擊打開彈窗，但是又出現了新的bug，點擊彈窗按鈕關不上彈窗，並報錯
Avoid mutating a prop directly since the value will be overwr...
還好這個問題比較常見，參考網上網友的解決辦法很快解決了。
原因：自定義組件使用了傳入的prop作為 Dialog 的visible綁定值，導致Dialog關閉直接修改了prop而被vue警告，並且操作失效。
自己情況比較網上其他博主的問題感覺又比較特殊，自己修修改改一通才解決。
思路：在父組件中改變visible的值來切換彈窗的開關狀態。
父組件添加中：
子組件中添加：
修改后，彈窗可以正常關閉了。
氣人啊，還是太菜了，這么個pe問題折騰一晚上，現在回想甚至一開始bug的原因都還不知道，現在沒啥時間了，不知道以后還想不想得起來思考一下。