Bagaimana untuk menyesuaikan pembolehubah secara global dalam vuejs

Kaedah: Sediakan fail modul pembolehubah global khusus Tentukan keadaan awal beberapa pembolehubah dalam modul, dedahkannya dengan "eksport lalai", dan gunakan "Vue.prototype" dalam "main.js" untuk. lekapkannya apabila anda perlu menggunakannya pada contoh vue atau di tempat lain, hanya perkenalkan modul ini.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Tentukan pembolehubah global

Prinsip:

Tetapkan fail modul pembolehubah global khusus, tentukan beberapa keadaan awal pembolehubah dalam modul, gunakan lalai eksport untuk mendedahkannya, secara utama . Gunakan Vue.prototype dalam js untuk memasangnya pada contoh vue atau apabila ia perlu digunakan di tempat lain, hanya perkenalkan modul ini.

Fail modul pembolehubah global:

Fail Global.vue:

<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>

Kaedah penggunaan 1:

Rujuk modul pembolehubah global di mana fail diperlukan, dan kemudian dapatkan nilai parameter pembolehubah global melalui nama pembolehubah dalam fail.

Digunakan dalam komponen text1.vue:

<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>

Kaedah penggunaan 2:

Dalam fail main.js di pintu masuk program, tambahkan Global.vue di atas fail Lekapkan ke Vue.prototype.

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

Kemudian tidak perlu merujuk fail modul Global.vue dalam keseluruhan projek Anda boleh mengakses terus pembolehubah global yang ditakrifkan dalam fail Global melalui ini.

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 juga boleh menetapkan pembolehubah global

Cadangan berkaitan: "tutorial vue.js "

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan pembolehubah secara global dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!