Vue 项目全局混入mixin

前言

在开发大数据监控时,主要的技术栈时echarts+vue,因为echarts在生成每一个图表的时候,都会执行一些公共方法(初始化,resize等),于是使用全局混入mixin将这些公共方法封装.这里只说一下关于全局混入如何操作

mixin全局混入

mixin文件

新建一个mixin/echartMixin.js文件,内部值如下

export default {
    methods:{
        echartsCom(context){
            console.log(111)
        }
    }
}

main.js引入

import Mixin from './mixins/echartsMixin.js';
Vue.config.productionTip = false
Vue.mixin(Mixin);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在某个子组件中使用全局混入的方法

mounted(){
    this.echartsCom('')
  }

结果

浏览器打印出111