Explication détaillée sur plusieurs méthodes de définition de variables globales dans VUE-js tutoriel-php.cn

Explication détaillée sur plusieurs méthodes de définition de variables globales dans VUE

黄舟

Libérer： 2017-07-24 13:37:35

original

4126 Les gens l'ont consulté

Récemment, lors de l'apprentissage de VUE.js, les variables globales JS sont impliquées. Il ne s'agit pas tant des variables globales de VUE, mais plutôt des variables globales du développement JS modulaire.

1. Module spécial pour les variables globales

utilise un module spécifique pour organiser et gérer ces variables globales. Importez simplement ce module si nécessaire.

Module spécial 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>

Copier après la connexion

Les variables du module sont exposées via l'exportation Lorsqu'elles doivent être utilisées ailleurs, introduisez simplement le module global.

Modules qui doivent utiliser des variables globales html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <div 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>
   </div>
  </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>

Copier après la connexion

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

Global.js est le même que ci-dessus. Ajoutez le code suivant à main.js à l'entrée du programme

import global_ from &#39;./components/tool/Global&#39;
Vue.prototype.GLOBAL = global_

Copier après la connexion

Après le montage, il n'est pas nécessaire d'importer le module global dans le module qui doit référencer la variable globale. , vous pouvez la citer directement en utilisant 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>

Copier après la connexion

3. Utilisez VUEX

Vuex est un modèle de gestion d'état spécialement développé pour Vue. Applications .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 le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!