vue.js—定義全局變量、函數(shù)的方式

更新時間：2023年10月19日 10:11:43 作者：Java少年

這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、全局變量

原理

1. 單獨(dú)新建一個全局變量模塊文件，模塊中定義一些變量初始狀態(tài)，用export default 暴露出去。

2. 在main.js中引入，并通過Vue.prototype掛載到vue實(shí)例上面。供其他模塊文件使用；

3. 或者直接引入到需要的模塊文件中使用；

步驟一、定義一個全局組件 Global.vue

里面只有<script>

<!--設(shè)置全局變量-->
<script>
    //接口地址
    const BASE_URL = 'http://118.189.105.152:7181/qianzhang-transf/index/'; //定義全局接口地址
    //請求頭部       
    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ù)

原理

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

方法1. 在main.js里面直接寫函數(shù)

在需要使用的地方直接使用 this.getUserInfo()即可。

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

步驟一、新建一個base.js 封裝的全局的函數(shù)

步驟二、在main.js中引入

步驟三、使用

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

手把手教你Vue3?按需引入?Echarts的過程(收藏)
新項(xiàng)目采用?Vue3?作為前端項(xiàng)目框架,避免不了要使用?echarts,但是在使用的時候,出現(xiàn)了與?Vue2?使用不一樣的地方,所以特別記下來,希望給到有需要的同學(xué)一些幫助
2023-10-10
Vue自定義多選組件使用詳解
這篇文章主要為大家詳細(xì)介紹了Vue自定義多選組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
通過Vue實(shí)現(xiàn)Excel文件的上傳和預(yù)覽功能
在業(yè)務(wù)系統(tǒng)中,Excel 文件作為一種常用的數(shù)據(jù)存儲和傳輸格式,經(jīng)常需要被處理和展示,這篇文章將講解如何通過 Vue 和 xlsx.js 實(shí)現(xiàn) Excel 文件的上傳和預(yù)覽功能,需要的朋友可以參考下
2025-04-04
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下
2019-11-11
淺談Vue.use的使用
這篇文章主要介紹了淺談Vue.use的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
vue中el-cascader三級聯(lián)動懶加載回顯問題解決
本文主要介紹了vue中el-cascader三級聯(lián)動懶加載回顯問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue+elementUI組件遞歸實(shí)現(xiàn)可折疊動態(tài)渲染多級側(cè)邊欄導(dǎo)航
這篇文章主要介紹了vue+elementUI組件遞歸實(shí)現(xiàn)可折疊動態(tài)渲染多級側(cè)邊欄導(dǎo)航，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
el-table-column 內(nèi)容不自動換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動換行的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫
這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue.js—定義全局變量、函數(shù)的方式

目錄

一、全局變量