vue.js—定義全局變量、函數(shù)的方式
廢話不多說，直接上代碼，以便以后學(xué)習(xí)查看。。。
一、全局變量
原理
1. 單獨(dú)新建一個(gè)全局變量模塊文件，模塊中定義一些變量初始狀態(tài)，用export default 暴露出去。
2. 在main.js中引入，并通過Vue.prototype掛載到vue實(shí)例上面。供其他模塊文件使用；
3. 或者直接引入到需要的模塊文件中使用；
步驟一、定義一個(gè)全局組件 Global.vue
里面只有<script>
<!--設(shè)置全局變量-->
<script>
//接口地址
const BASE_URL = 'http://118.189.105.152:7181/qianzhang-transf/index/'; //定義全局接口地址
//請(qǐng)求頭部
const reqHead = {
"transDate": "20180816",
"encryptFlag": "1",
"seqNo": "2018081628507127",
"serviceID": "loanLmtQryHXMKL",
"transTime": "174341",
"channelID": "netbank"
}
export default { //將常量暴露出去
BASE_URL,
reqHead,
}
</script>步驟二、修改原型鏈
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import global_ from './components/Global.vue' //引入全局組件
Vue.prototype.GLOBAL = global_; //修改原型
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})步驟三、使用
在需要 的vue頁面直接使用 this.GLOBAL.BASE_URL，就可以獲取到定義常量值
二、全局函數(shù)
原理
新建一個(gè)模塊文件，然后在main.js里面通過Vue.prototype將函數(shù)掛載到Vue實(shí)例上面，通過this.輸出的函數(shù)名，來運(yùn)行函數(shù)。
方法1. 在main.js里面直接寫函數(shù)
在需要使用的地方直接使用 this.getUserInfo()即可。
方法2. 新建一個(gè)模塊文件，掛載到main.js
步驟一、新建一個(gè)base.js 封裝的全局的函數(shù)
步驟二、在main.js中引入
步驟三、使用
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題
今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題，具有很好的價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vite+vue3中如何使用router問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue將文件/圖片批量打包下載zip的教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題
這篇文章主要介紹了關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目中通過路由守衛(wèi)實(shí)現(xiàn)自動(dòng)取消Pending請(qǐng)求功能
現(xiàn)代Web應(yīng)用中,當(dāng)用戶在頁面間快速切換時(shí),常常會(huì)遇到一些正在進(jìn)行的網(wǎng)絡(luò)請(qǐng)求繼續(xù)執(zhí)行的問題,本文將介紹如何在Vue項(xiàng)目中通過路由守衛(wèi)實(shí)現(xiàn)自動(dòng)取消pending請(qǐng)求的功能,提高應(yīng)用的性能和用戶體驗(yàn),需要的朋友可以參考下2026-04-04
這篇文章主要介紹了在vue3中使用jsx語法,下面主要通過對(duì)比jsx和template不同語法，來實(shí)現(xiàn)同樣的功能，需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vuex是專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的屬性，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
一文了解Vue 3 的 generate 是這樣生成 render&n
本文介紹generate階段是如何根據(jù)javascript AST抽象語法樹生成render函數(shù)字符串的,本文中使用的vue版本為3.4.19,感興趣的朋友跟隨小編一起看看吧2024-06-06