vue中如何定義全域變數和全域函數並使用？ （附代碼）

本篇文章帶給大家的內容是關於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裡面直接寫函數

簡單的函數可以直接在main.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.輸出的函數名稱，調用，程式碼範例如下：

相關推薦：

vue全分析--Vue Vue-router Vuex axios

#vue-cli編寫vue外掛實例

以上是vue中如何定義全域變數和全域函數並使用？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！