So passen Sie Variablen global in VueJS an

Methode: Richten Sie eine dedizierte globale Variablenmoduldatei ein, stellen Sie sie mit „Standard exportieren“ bereit und verwenden Sie „Vue.prototype“ in „main.js“, um sie einzuhängen vue-Instanz oder Wenn Sie es an anderer Stelle verwenden müssen, führen Sie einfach dieses Modul ein.

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

Globale Variablen definieren

Prinzip:

Legen Sie eine dedizierte globale Variablenmoduldatei fest, definieren Sie einige Anfangszustände von Variablen im Modul, machen Sie sie mit Exportstandard verfügbar und verwenden Sie Vue.prototype in main.js, um sie im Vue bereitzustellen Instanz Oder wenn Sie es an anderer Stelle verwenden müssen, führen Sie einfach dieses Modul ein.

Globale Variablenmoduldatei:

Global.vue-Datei:

<script>
const serverSrc=&#39;www.baidu.com&#39;;
const token=&#39;12345678&#39;;
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>

Verwendungsmethode 1:

Referenzieren Sie bei Bedarf auf die globale Variablenmoduldatei und ermitteln Sie dann den Parameterwert der globalen Variablen über den Variablennamen in der Datei.

Verwendet in der text1.vue-Komponente:

<template>
    <div>{{ token }}</div>
</template>

<script>
import global_ from &#39;../../components/Global&#39;//引用模块进来
export default {
 name: &#39;text&#39;,
data () {
    return {
         token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
        }
    }
}
</script>
<style scoped>

</style>

Verwendungsmethode 2:

Montieren Sie in der main.js-Datei am Programmeingang die obige Global.vue-Datei in Vue.prototype.

 import global_ from './components/Global'//引用文件
 Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

Dann ist es nicht erforderlich, im gesamten Projekt auf die Moduldatei Global.vue zu verweisen. Sie können dadurch direkt auf die in der Global-Datei definierten globalen Variablen zugreifen.

text2.vue:

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: &#39;text&#39;,
data () {
    return {
         token:this.GLOBAL.token,//直接通过this访问全局变量。
        }
    }
}
</script>
<style scoped>
</style>

Vuex kann auch globale Variablen festlegen

Verwandte Empfehlungen: „vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonSo passen Sie Variablen global in VueJS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!