场景是在项目中很多地方都需要用到相同的函数,例如
this.$message({
type: 'success',
message: '提示语'
})
如果出现次数过多,会造成书写麻烦和代码复杂的情况。
解决思路:首先对函数进行抽象封装,封装后利用vue的mixin将其注入到各个vue中。
因为这里的函数是大部分组件中都可能用到的,固利用vue的全局混合。
- 新建一个global文件:
const globalMethods = {
methods: {
tipSuccess(msg) {
this.$message({
type: 'success',
message: msg
})
},
tipError(msg) {
this.$message({
type: 'error',
message: msg
})
},
},
}
export {
globalMethods
}
- 在新建Vue的原型中利用mixin混入(main.js中,创建vue实例前):
Vue.mixin(globalMethods)
- 任意vue中使用: