VUE自定义全局事件

 

 

1、vue中定义全局事件

 

我使用的方法2，这样代码比较简洁，也方便定义多个事件。

 

方法1：直接再main,js里构造函数

在main.js中Vue构造函数的原型上新增函数；

Vue.prototype.globalGetData=function(){
  console.log('getData');
};

然后可以直接在模板中调用：

    this.globalGetData();

 

方法2：新建js文件,再引用绑定

创建一个文件（base.js）：

exports.install = function (Vue) {
  // $符号可加可不加
  Vue.prototype.$globalGetData = function () {
    console.log('getData');
  }
};

 

或者这样子：

export default {
  install(Vue) {
    // $符号可加可不加，不过感觉加上方便辨识比较好
    Vue.prototype.$globalGetData = function () {
      console.log('getData');
    };
  }
}

 

 

 然后在main.js中引入base.js并use:

 

import base from './base
Vue.use(base);

 

使用

this.$globalGetData();

 

 

 

方法三：使用全局变量模块文件

Global.vue文件：

<script>
    const token='12345678';

    export default {
        methods: {
            getToken(){
                ....
            }
        }
    }
</script>

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

 

<script>
import global from '../../components/Global'//引用模块进来
export default {
    data () {
        return {
            token:global.token
        }
    },
    created: function() {
        global.getToken();
    }
}
</script>