vue使用混入定义全局变量、函数、筛选器的实例代码
说一种没人发的,利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。
一、main.js文件
importVuefrom'vue' importAppfrom'./App' importrouterfrom'./router' importstorefrom'./store' importmixinfrom'./utils/mixin' Vue.prototype.$bus=newVue() //进行全局混入 Vue.mixin(mixin) newVue({ store, router, render:h=>h(App), }).$mount('#app')
一、mixin.js文件,我是把方法、变量、筛选器这三个分别写到三个js文件里面了,方便后期维护。也可以直接写到mixins文件里面
importfiltersfrom'./filters' importglobalMethodsfrom'./global-methods' importConfigfrom'../config' importCONSTANTfrom'./const_var' //全局混入 exportdefault{ data(){ return{ CONFIG:Config, CONSTANT, } }, methods:{ ////将globalMethods文件里面的方法挂载到vue上,以方便调用,直接this.$xxx方法名就可以了 //Object.keys(globalMethods).forEach(key=>{ //Vue.prototype[key]=tools[key] //}) //将globalMethods里面的方法用对象展开符混入到mixin上,以方便调用,直接this.$xxx方法名就可以了 ...globalMethods, }, filters:{ ////将filter里面的方法添加了vue的筛选器上 //Object.keys(filters).forEach(key=>{ //Vue.filter(key,filters[key]) //}) ...filters, }, }
filters.js文件
exportdefault{ //时间转换器 date(v){ ... }, //处理身份证信息,中间隐藏掉 processIdNumber(v){ ... }, }
global-methods.js文件
import{Message,MessageBox}from'element-ui' exportdefault{ $success(msg){ ... }, $warning(msg){ ... }, $error(msg){ ... }, $checkPlatform(){ ... }, //倒计时时间格式化 $countdownFormatTime(timeStamp){ ... }, }
constant_var.js文件
exportdefault{ REDIRECT:'redirect', //请求方法 POST:'post', GET:'get', PATCH:'patch', DELETE:'delete', PUT:'put', //静态常量 PICKEROPTIONS:{ ... }, PAGENUMBER:1, PAGESIZE:10, DELAYTIME:250, SUCCESS:'000000', }
总结
以上所述是小编给大家介绍的vue使用混入定义全局变量、函数、筛选器的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!