晚上做了一个页面，想要的效果是一个表格里每一行数据点击最后一列操作按钮可以点击打开弹窗，显示这一行数据的详情信息。
根据需求，为了简化代码决定用父子组件，将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的原因都还不知道，现在没啥时间了，不知道以后还想不想得起来思考一下。