vue全局函数

vue全局函数

---

---

文件目录结构

– src
|
|__main.js
|__test.js

全局方法

首先写一个全局方法放入 test.js 文件内

// 事先定义好的，为了vue识别注册之用
exports.install = function (Vue, options) {
    // 这里的“$myMethod”是函数名
    Vue.prototype.$myMethod = function (){
        console.log('我的第一个全局方法');
    };
};

使用上面的写法突然遇到一个很诡异的报错：

ReferenceError: exports is not defined

开始以为JSON.stringify({a:3})造成的，后来经过一番搜寻
参照@gaoryrt的原答案
将代码修改为：

// main.js 里面使用 import commonFun，那么在 utils/index.js 里面你需要 export default
// 如果想在 utils/index.js 里面使用 exports.install =， 那么在 main.js 应该使用 import {install} 
export default {
    install(Vue, options)  {
        Vue.prototype.FuncA = {
            ...
        }
    }
}

注册

在 main.js 文件内引用并注册

// 因为test.js文件和main.js文件处在同级目录，所以需要添加前缀‘./’
import Test from './test'
// 注册
Vue.use(Test)

使用

在实际组件内使用：

// “$myMethod” 是之前定义好的全局函数名
this.$myMethod();