Comment définir des variables globales dans vue2 ? (tutoriel détaillé)

Je vais maintenant partager avec vous un article sur la façon de définir les variables globales de vue2. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Récemment, lors de l'apprentissage de VUE.js, des variables globales JS sont impliquées. Plutôt que d'être des variables globales de VUE, ce sont des variables globales pour le développement JS modulaire.

1. Module spécial pour les variables globales

est un module spécifique pour organiser et gérer ces variables globales. Vous pouvez importer ce module où que vous soyez. il faut bien y faire référence.

Module spécialisé pour les variables globales Global.vue

<script type="text/javascript">
const colorList = [
 &#39;#F9F900&#39;,
 &#39;#6FB7B7&#39;,
 &#39;#9999CC&#39;,
 &#39;#B766AD&#39;,
 &#39;#B87070&#39;,
 &#39;#FF8F59&#39;,
 &#39;#FFAF60&#39;,
 &#39;#FFDC35&#39;,
 &#39;#FFFF37&#39;,
 &#39;#B7FF4A&#39;,
 &#39;#28FF28&#39;,
 &#39;#1AFD9C&#39;,
 &#39;#00FFFF&#39;,
 &#39;#2894FF&#39;,
 &#39;#6A6AFF&#39;,
 &#39;#BE77FF&#39;,
 &#39;#FF77FF&#39;,
 &#39;#FF79BC&#39;,
 &#39;#FF2D2D&#39;,
 &#39;#ADADAD&#39;
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

Les variables du module sont exposées via l'exportation Lorsque d'autres endroits ont besoin de l'utiliser, introduisez simplement le module. mondial.

Modules qui doivent utiliser des variables globales html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <p class="projectItem" :style="&#39;box-shadow:1px 1px 10px &#39;+ getColor()">
     <router-link :to="&#39;project/&#39;+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </p>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from &#39;components/tool/Global&#39;
export default {
 data () {
  return {
   getColor: global_.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

2. Montez le module de variable globale dans Vue.prototype.

Idem que ci-dessus pour Global.js, ajoutez le code suivant à main.js à l'entrée du programme

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

Après le montage, dans le module qui doit référencez la variable globale, non Vous devez importer le module global et le référencer directement avec ceci, comme suit :

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>

3. Utilisez VUEX

Vuex Oui Un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application. Par conséquent, les variables globales peuvent être stockées. Parce que Vuex est un peu encombrant, cela semble excessif. Je ne pense pas que ce soit nécessaire.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Exemples de redirection dynamique de routage et de garde de navigation de Vue

Implémentation JS de l'ajout d'opérations d'événement pour les éléments créés dynamiquement Exemple

Introduction à la séquence d'appel des fonctions dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!