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

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

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

一、全局變量

原理

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

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

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

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

里面只有<script>

<!--設置全局變量-->
<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實例上面，通過this.輸出的函數(shù)名，來運行函數(shù)。

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

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

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

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

步驟二、在main.js中引入

步驟三、使用

總結

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

您可能感興趣的文章:

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

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

目錄

一、全局變量