基于SqlSugar的开发框架循序渐进介绍-- 基于Vue3+TypeScript的全局对象的注入和使用

最新推荐文章于 2024-08-18 23:58:50 发布

小二上酒8

最新推荐文章于 2024-08-18 23:58:50 发布

阅读量379

点赞数

文章标签： typescript javascript vue.js java 开发语言

本文链接：https://blog.csdn.net/Huangjiazhen711/article/details/127105113

版权

本文介绍了如何在Vue2和Vue3+TypeScript中进行全局对象的挂载，详细阐述了Vue3由于语法变化带来的不同处理方式，并提供了具体的代码示例。在Vue3中，通过创建独立的ts文件定义接口类型，实现强类型的全局辅助类对象挂载，以提高代码的可读性和维护性。

摘要由CSDN通过智能技术生成

刚完成一些前端项目的开发，腾出精力来总结一些前端开发的技术点，以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章，本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用。我们知道在Vue2中全局注入一个全局变量使用protoType的方式，很方便的就注入了，而Vue3则不能通过这种方式直接使用，而是显得复杂一些，不过全局变量的挂载有它的好处，因此我们在Vue3+TypeScript中也继续应用这种模式来处理一些常规的辅助类方法。

1、Vue2的全局挂载

Vue2的挂载由于它的便利性，常常会被大量的使用，只需要使用Vue.protoType.**的方式就可以注入一个变量到全局上，并在页面或者组件中，通过this.**就可以访问到，非常的方便，如下所示。

    Vue.prototype.getToken = getToken
    Vue.prototype.guid = guid
    Vue.prototype.isEmpty = isEmpty

如果注入一些函数定义，也是类似的方式

// 提示成功信息
    Vue.prototype.msgSuccess = function(msg) { this.$message({ showClose: true, message: msg, type: 'success' })
    } // 提示警告信息
    Vue.prototype.msgWarning = function(msg) { this.$message({ showClose: true, message: msg, type: 'warning' })
    } // 提示错误信息
    Vue.prototype.msgError = function(msg) { this.$message({ showClose: true, message: msg, type: 'error' })
    }

有时候为了便利，会把一些常规的放在一个函数里面进行注册挂载处理。如下代码所示。