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>