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使用混入定义全局变量、函数、筛选器的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！