uniapp 挂载全局方法
前言
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,所以语法方面跟Vue及其类似,本文章主要介绍关于在uniapp中如何使用全局方法。
需求
如果你想要自定义一个方法,并且希望该方法在项目的各个页面都可以直接使用,那么可以将其作为一个全局方法挂载到项目上
实现
简单的实现
(1)在main.js里面直接写你的全局方法,然后挂载到Vue去,如下
//挂载全局方法 Vue.prototype.$test = function(value){ console.log(value) }复制代码
(2)然后在代码里面可以直接这样使用
this.$test("全局方法挂载")复制代码
PS:这个 Vue.prototype.$test
,带个“$”,不是必须的,只是为了跟普通方法做个区分,说明这是全局方法。
评价:这个实现方法虽然简单明了,但是直接写在main.js文件里面,如果每个全局方法都这么做的话,全局方法一多,不好扩展也不好管理,如果你的项目是体量较大的话不建议这么做。
稍微复杂的实现
(1) 新建一个文件 validate.js,在该文件里面写好你的全局方法,如果你有若干个全局方法,可以这样写,如下:
/** * validate.js,全局校验方法,不够可以补充 */ export default { //数字校验 isNumber: function(val) { return true }, //电话校验 isPhone: function(val) { return true }, //邮件校验 isEmail: function(val) { return true } }复制代码
(2)在main.js里面引入你的全局方法
import validate from 'validate.js' // 挂载到全局 Vue.prototype.$validate = validate复制代码
(3)测试使用
this.$validate.isNumber(val) this.$validate.isPhone(val) this.$validate.isEmail(val)复制代码
评价:这个实现方法对比上个的直接实现,又委婉了下,将全局方法放到一个统一文件里,利于维护也利于管理,如果你在开发过程不赶时间的话,推荐这样做。
后记
黑猫白猫,能抓到老鼠就是好猫
开发一时爽,维护火葬场
作者:勤任风
链接:https://juejin.cn/post/7065210182560645151