如何用Vue实现Dialog封装

这篇文章主要讲解了“如何用Vue实现Dialog封装”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用Vue实现Dialog封装”吧！在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单，常用的交互就是把表单以弹窗的形式展示，但是在每个页面又重复的引入表单组件有时候又很麻烦解决方案有两个：在根免费云主机、域名组件里面引入动态组件，在业务里面通过this.$root.openDialog(name, props)去控制动态组件的展示形式封装成插件的形式去调用，比如this.$dialog(“EditDialog.vue”, props)当然了，业务 Dialog 组件要有一套规范，props 接收一个 onOk、onCancel 回调，data 里面定义一个 visible 属性在 Vue2 里面我个人感觉写成插件是比较好用的，实现如下，使用混入做了一些操作，和业务进行解耦有点不太好的地方是组件是动态插入的，Vue devtools 要刷新下才能看到组件调用方式如下，注意 onOk 回调的 this 指向，使用箭头函数直接就避免了 ?很糟糕的是，由于 Vue3 的升级Vue.extend没有了，$mount也没有了，组件只能在应用里面去渲染每个应用之间的数据是隔离的，所以插件什么的都要重新引入。同时如果要交互交互的话也比较麻烦，引入同一个 vuex 实例应该可以，但是没怎试为了低耦合只能去新建一个应用去挂载渲染在 Vue3 里面，插件版的写法同样达到了要求，但是完全是一个新引应用了，如果在业务里访问this.$root,vuex,router还是有点麻烦的所以 Vue3 里面还是动态组件的写法比较好在根组件引入动态 component，定义一些控制变量调用的的话this.$root.$dialog(),看起来太难看，其实还是可以手动模拟插件的效果的vue3 组件实例获取应用实例vue3 应用实例获取组件实例，注意_instance 仅在 dev 环境能访问到骚操作还是有的，但是最好不要用感谢各位的阅读，以上就是“如何用Vue实现Dialog封装”的内容了，经过本文的学习后，相信大家对如何用Vue实现Dialog封装这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: Vue中怎么实现替换路由而不切换选项卡

今天小编给大家分享一下Vue中怎么实现替换路由而不切换选项卡的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完免费云主机、域名这篇文章后有所收获，下面我们一起来了解一下吧。 什么是Vue路由系统…