vue專案中,定義並使用 全域性變數,全域性函式
阿新 • • 發佈:2018-12-23
一、定義變數,並全域性使用
原理:
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.輸出的函式名
,呼叫,程式碼示例如下:
end!~