引言：先感谢掘金的两位大佬的文章启发，在巨人的肩膀上进行了再次探索。 xekin大佬（下文简称大佬X）的 《Vue2 Dialog 弹窗函数式调用最佳实践》 以及 上面文章评论区的 Shadowzzh大佬（下文简称大佬S）的自己根据大佬X的代码改的方法。
大佬X的文章中写了dialog调用的痛点，这里就不多再赘述。文章中大佬X的ts文件中代码给出了一个实现的方式，是个比较偏方向性的实现思路，目前ts语法还不是很熟练，所以大佬X的文件能看懂，但是改起来还是有点小困难。评论区另一位大佬S根据大佬X的思路重新写了js文件，down下来，研究之后，发现基础的功能实现了--通过函数调用dialog。
但还是有些小问题： 1、弹窗 中可以正常写一些文案，但是不太支持写一些复杂的内容。 2、如果用component标签，塞入其他内容（表单、表格....），展示无任何问题，但在真实的业务环境中，对于表单，尤其需要校验非空项
经过一段时间的思考，对大佬S的demo重新进行了一下更详细的修改，修改完成之后，支持： 1、支持弹窗中嵌套一些表单、表格等一些复杂的内容。 2、如果嵌套表单，涉及到一些必填项检验，也可以先校验，校验未通过，不会关闭弹窗，校验通过，弹窗关闭，并且把表单数据在传到调用函数外面 3、支持弹窗标题自定义，简单来说也是用component标签接title。
函数调用图片↓：
附个动图↓：
2023-11-2 补充：
昨天和大佬X评论区的一位小伙伴探讨时候，那位小伙伴说编辑回显的操作，想想确实漏掉了这个逻辑，今天重新补充了一下，并且稍微优化了下代码，更方便看了。附上新的优化完的截图↓
遇到的问题
在关闭弹窗时，会触发dialogclose方法，demo逻辑中，在弹窗关闭时，会调用传入组件的resetForm方法，该方法会如果传入组件是表单，则清空表单，其他的条件不做处理。如果正常点击dialog的取消按钮，只会触发一次关闭方法，但是如果点击 弹窗关闭图标 或者 点击遮罩 或者 点击确定，校验成功之后，关闭弹窗，就会触发close方法；点图标、点遮罩触发clsoe方法，直接重置表单，关系不大，但是如果点确定按钮，再触发close方法，就会把传到最外面的form也重置掉（ps：点 确定按钮，会将校验通过的form传出去，然后弹窗关闭时触发close方法，将form重置，相当于第一次form有值，第二次form没值）。
解决办法
在传入组件中，添加一个标识isShow，初始化为true，点弹窗确定按钮，校验通过之后，isShow->false，在resetForm函数中，添加isShow兼容判断（如果有form节点 && isShow）时，执行重置表单逻辑，其他情况正常关闭。
优化
上述的解决方案，目前是解决了点击确定按钮两次触发close方法的问题，但是又增加了一个isShow标识，不是很方便。优化方案还在思考ing。。。
新的优化方案
通过函数调用dailog时，新增一个type字段，通过type字段去控制isShow，这样灵活性稍微高了些。简单附个图↓
App.vue ↓
嵌套组件 ↓
对于表单校验方法，感觉有不少优化空间，也在思考ing，如果其他小伙伴有更好的方式，欢迎一起讨论，最后附上自己改的项目地址Gitgee
最后，如果有转载，请注明来处~~~~
