在vue中封装方法以及多处引用该方法详解
步骤：
1.先建立一个文件，放你想封装的方法；然后导出；
部分代码：
注：导出这个地方需要特别注意：如果是一个对象的话：export对象；如果是一个函数的话：export{函数}
2.引入文件：
补充知识：vueuni-app公共组件封装，防止每个页面重复导入
1、公共插件
实现目标，将公共组件或者网络请求直接在this中调用，不需要再页面引用
#例如网络请求
var_this=this;
this.api.userInfo({
token:''
}
#通用工具
_this.utils.showBoxFunNot("是否退出登陆",function(){
console.log("确定")
_this.api.logOut({},function(data){
_this.utils.setCacheValue('token','')
uni.redirectTo({
url:'/pages/LogIn/LogIn'
});
})
})
公共插件utils.js或者可以将网络请求api.js封装成对象
varutils={
function_chk:function(f){
try{
varfn=eval(f);
if(typeof(fn)==='function'){
returntrue;
}else{
returnfalse;
}
}catch(e){
}
returnfalse;
},
showBox:function(msg){
uni.showModal({
title:"错误提示",
content:""+msg,
showCancel:false,
confirmText:"确定"
})
},
showBoxFun:function(msg,fun){
uni.showModal({
title:"提示",
content:""+msg,
showCancel:false,
confirmText:"确定",
success:(res)=>{
fun(res)
}
})
},
showBoxFunNot:function(msg,fun,cancel){
var_this=this
uni.showModal({
title:"提示",
content:""+msg,
confirmText:"确定",
cancelText:"取消",
success:(res)=>{
if(res.confirm){//取消
if(_this.function_chk(fun)){
fun(res)
}
}elseif(res.cancel){//确定
if(_this.function_chk(cancel)){
cancel(res)
}
}
},
can:(err)=>{
}
})
},
notNull:function(obj,msg='参数不能为空'){
varkeys=Object.keys(obj);
console.log(keys)
for(variinkeys){
varkeyName=keys[i]
console.log(keys[i])
varvalue=obj[keyName]
if(value==''){
console.log("为空的参数：",keyName)
this.showBox(msg)
returntrue;
}
console.log(value)
}
returnfalse;
},
getCacheValue:function(key){
varvalue='';
try{
value=uni.getStorageSync(key);
}catch(e){
}
returnvalue;
},
setCacheValue:function(key,value){
try{
value=uni.setStorageSync(key,value);
}catch(e){
}
}
}
exportdefaultutils
2、注册到vue实例中
main.js文件中将工具注册进入
importutilsfrom'common/utils.js'; importapifrom'common/api.js'; Vue.config.productionTip=false Vue.prototype.utils=utils Vue.prototype.api=api
以上这篇在vue中封装方法以及多处引用该方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。