在开发项目的过程中，有些函数的使用频率很高，每个页面都写的话太繁琐，可以将其封装成全局函数传参使用。
有些变量比如图片的路径（接口返回的 /***/***/.jpg）,没有http://的部分，需要自己拼接，且后期需要修改http://部分，去一个一个修改肯定不现实，因此需要单独封装，方便后期修改。
1、在src文件夹下新建utils文件夹，新建globalfunc.js和globalvar.js文件
封装全局函数
在globalfunc.js文件，多个函数之间用 逗号 隔开；
方法一：
export default {
fun1(val){
alert(val,'可传参')
},
fun2(){
return 'fun2不用传参！！！'
}
}
方法二：
const fun1=(val)=>{
alert(val,'可传参')
};
const fun2=()=>{
return 'fun2不用传参！！！'
};
const fun3=(val=333)=>{
return 'fun3'+val;
};
export default {
fun1,fun2,fun3
}
在main.js中引入并注册
import globalfunc from './utils/globalfunc'
//注册全局函数
Vue.prototype.globalfunc=globalfunc;
在vue文件中使用
<template>
<div class="about">
{{ globalfunc.fun2()}}<!-- 全局函数--不需要传参的 -->
</div>
</template>
<script>
export default {
created() {
this.globalfunc.fun1("传参666"); /* <!-- 全局函数--需要传参的 --> */
},
};
</script>
封装全局变量
方法一：
在globalvar.js文件，多个变量之间用 逗号 隔开；
const BASEURL ='http://11.22.33.10';
const NAME ='上杉绘梨衣';
export default{
BASEURL,NAME
}
在main.js中引入并注册
import globalvar from './utils/globalvar'
//注册全局变量
Vue.prototype.globalvar=globalvar;
方法二：
export default{
install(Vue){
Vue.prototype.globalvar={
CONTENT:"全局变量",
AGE:18
}
}
}
在main.js中引入并注册
import globalvar from './utils/globalvar'
//注册全局变量
Vue.use(globalvar)
在vue文件中使用
<template>
<div class="about">
{{ globalvar.NAME }}<!-- 全局变量 -->
</div>
</template>
<script>
export default {
created() {
console.log(this.globalvar.NAME); /* 全局变量 */
},
};
</script>