vue項目中，定義並使用全局變量，全局函數

原理：

1. 單獨新建一個全局變量模塊文件，模塊中定義一些變量初始狀態，用export default暴露出去。
2. 在main.js中引入，並通過Vue.prototype掛載到vue實例上面。供其他文件使用；
3. 或直接引入到需要的模塊文件中使用

項目目錄：

 

 步驟1、新建global_variable.js文件，用於存放變量，示例如下：

const baseURL = 'www.baidu.com'
const token = '123456'
const userSite = '林花落了春紅，太匆匆'

export default {
  baseURL,
  token,
  userSite
}

    方法1：在需要使用的模板文件中使用（局部引用），示例如下

 

  方法2：全局使用，示例如下：

1、將global_variable.js文件引入main.js文件，並使用Vue.prototype掛載至vue實例上，示例如下：

 

 2、在需要使用的模塊文件中使用（無需引入，直接通過this使用），示例如下：

 

 

 二、定義函數，並全局使用

原理：

新建一個模塊文件，然后在main.js里面通過Vue.prototype將函數掛載到Vue實例上面，通過this輸出的函數名，來運行函數。

  方法1.在main.js里面直接寫函數

  簡單的函數可以直接在mian.js里面直接寫，示例如下：

 

  方法2.新建一個模塊文件，掛載到main.js上面

  項目目錄如下：

 

 1、global_func.js文件中代碼示例如下：

// param為傳入參數
function packageFunc (param) {
  alert(param)
}

export default {
  // Vue.js的插件應當有一個公開方法 install。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。
  install: function (Vue) {
    Vue.prototype.global_func = (param) => packageFunc(param)
  }
}

2、main.js文件中代碼示例如下：

 

 3、在需要調用的模塊文件中使用this.輸出的函數名，調用，代碼示例如下：

 

 參考：https://blog.csdn.net/qq_30669833/article/details/81706217