vue自定义全局js函数_15 - vue 自定义全局函数

使用vue 时，有时需要设置公共的函数，便于在所有组件中调用或者在组件的生命周期中都可调用，这便需要自定义全局函数。以下介绍一些全局函数的定义方式。

一、所有组件可调用

1、方法一：Vue.prototype

在mian.js中写入函数

Vue.prototype.getToken = function (){

...

}

在所有组件里可调用函数

this.getToken();

2、方法二：exports.install+Vue.prototype

写好自己需要的公共JS文件(fun.js)

exports.install = function (Vue, options) {

Vue.prototype.getToken = function (){

...

};

};

main.js 引入并使用

import fun from './fun' // 路径示公共JS位置决定

Vue.use(fun);

所有组件里可调用函数

this.getToken();

可能遇到的问题：在用了exports.install方法时，运行报错exports is not defined

解决方法：

export default {

install(Vue) {

Vue.prototype.getToken = {

...

}

}

}

二、组件内引用调用

1、模块化 vue组件

自定义模块化组件

const token='12345678';

export default {

methods: {

getToken(){

....

}

}

}

在需要的组件中引用该组件，利用文件里面的变量名字获取全局变量参数值。

import global from '../../components/Global'//引用模块进来

export default {

data () {

return {

token:global.token

}

},

created: function() {

global.getToken();

}

}

2、自定义 .js 文件

自定义 .js 组件

function getAA(){

console.log('1111111')

}

export {

getAA

}

在需要的组件中，引用该 .js ,再调用该函数

import Test from '../../../static/js/test.js' //引用模块进来

export default {

data () {return {}},

created: function() {

Test.getAA();

}

}

3、公共的样式

复用性比较高的区域(遮罩提示、打星等，也可在一个组件中多次复用)，这种区域的模块复用，可以看我之前的 遮罩弹框公共组件 https://www.jianshu.com/p/f14fd7addca7