# Vue 定义全局函数
# 原理
通过 Vue.prototype 将函数挂载到 Vue 实例上面,在组件中通过 this.函数名,来运行函数。
# 1. 在 main.js 里面直接写函数
直接在 main.js 里面写:
Vue.prototype.test = function() {
console.log('执行全局函数test');
};
1
2
3
2
3
组件中调用:
this.test(); // 直接通过this运行函数
1
# 2. 写一个模块文件,挂载到 main.js 上面。
想要定义的全局函数比较多的话,推荐写在一个js文件里面,文件位置可以放在跟 main.js 同一级,方便引用
// base.js
exports.install = function(Vue, options) {
Vue.prototype.text1 = function() {
console.log('执行成功1');
};
Vue.prototype.text2 = function() {
console.log('执行成功2');
};
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
main.js 入口文件:
import Vue from 'vue'; // vue要在引文件之前
import base from './base.js'; // 引用文件
Vue.use(base); //将全局函数当做插件来进行注册
1
2
3
2
3
组件里面调用:
this.text1();
this.text2();
1
2
2