Heim  >  Artikel  >  Web-Frontend  >  So definieren Sie globale Variablen mit vue.js

So definieren Sie globale Variablen mit vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-12-24 14:34:316146Durchsuche

So verwenden Sie vue.js zum Definieren globaler Variablen: Erstellen Sie zunächst eine separate globale Variablenmoduldatei, definieren Sie einige Anfangszustände der Variablen im Modul, führen Sie sie dann in [main.js] ein und mounten Sie sie über [; Vue.prototype] Beispiel oben.

So definieren Sie globale Variablen mit vue.js

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6, DELL G3-Computer.

【Empfohlene verwandte Artikel: vue.js

So verwenden Sie vue.js zum Definieren globaler Variablen:

Prinzip:

1. Erstellen Sie separat eine neue globale Variablenmoduldatei und definieren Sie einige Initialen Variablen im Modulstatus werden mithilfe der Export-Standardeinstellung verfügbar gemacht.

2. Führen Sie es in main.js ein und mounten Sie es über Vue.prototype in der Vue-Instanz. Zur Verwendung durch andere Moduldateien; Vue.prototype挂载到vue实例上面。供其他模块文件使用; 

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

步骤一、定义一个全局组件 Global.vue,里面只有3f1c4e4b6b16bbbd69b2ee476dc4f83a

<!--设置全局变量-->
<script>
    //接口地址
    const BASE_URL = &#39;http://118.189.105.152:7181/qianzhang-transf/index/&#39;; //定义全局接口地址
    //请求头部       
    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 &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
import fastclick from &#39;fastclick&#39;
import global_ from &#39;./components/Global.vue&#39;  //引入全局组件
Vue.prototype.GLOBAL = global_;  //修改原型
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: &#39;#app&#39;,  
  router, 
  components: { App },
  template: &#39;<App/>&#39;
})

步骤三、使用

在需要 的vue页面直接使用 this.GLOBAL.BASE_URL

3. Oder direkt in die erforderliche Moduldatei zur Verwendung eingefügt werden

Schritt 1. Definieren Sie eine globale Komponente Global.vue, die nur 3f1c4e4b6b16bbbd69b2ee476dc4f83a enthält rrreee Schritt 2. Ändern Sie die PrototypenketterrreeeSchritt 3. Verwenden Sie Verwenden Sie this.GLOBAL.BASE_URL direkt auf der erforderlichen Vue-Seite, um den definierten konstanten Wert zu erhalten

Verwandtes kostenloses Lernen Empfehlungen:
🎜🎜Javascript🎜🎜🎜(Video)🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo definieren Sie globale Variablen mit vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn