首页 > 其他 > 详细

Vue 项目全局混入mixin

时间:2020-06-28 16:17:04      阅读:58      评论:0      收藏:0      [点我收藏+]

前言

在开发大数据监控时,主要的技术栈时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

技术分享图片

 

Vue 项目全局混入mixin

原文:https://www.cnblogs.com/liuXiaoDi/p/13202782.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!