阅读 1774

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


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐