[Vue2] Utilisation de composants dynamiques - composants de commutation, composants persistants et asynchrones

Vous souhaitez pouvoir basculer entre différentes listes pour afficher différentes données

première méthode

• Jugez la logique via v-if. chargé d'afficher lequel
• Inconvénients : Déconseillé lorsqu'il y a beaucoup de jugements logiques

<template>
  <div class="home">
    <div class="nev">
      <div
        class="nevbar"
        :class="nevindex == index ? 'newnev' : ''"
        v-for="(item, index) in tab"
        :key="index"
        @click="itemClick(index)"
      >
        {
    
    {
    
     item }}
      </div>
    </div>
    <one v-if="nevindex==0"></one>
    <two v-if="nevindex==1"></two>
    <three v-if="nevindex==2"></three>
  </div>
</template>

<script>
import one from "../components/one.vue";
import two from "../components/two.vue";
import three from "../components/three.vue";
export default {
    
    
  name: "HomeView",
  components: {
    
    
    one,
    two,
    three,
  },
  data() {
    
    
    return {
    
    
      tab: ["列表1", "列表2", "列表3"],
      nevindex: 0,
    };
  },
  methods: {
    
    
    // nev切换
    itemClick(index) {
    
    
      this.nevindex = index;
    },
  },
  created() {
    
    },
};
</script>
<style scoped lang="scss">
.nev {
    
    
  display: flex;
  justify-content: space-around;
}
.newnev {
    
    
  color: aqua;
}
</style>

Méthode 2, composants dynamiques

• 1. La fonction est similaire au composant onglet, qui peut être utilisé pour changer de composant
• 2. L'attribut is détermine le composant actuellement rendu par le composant. L'attribut is peut être un composant ou une chaîne. Lorsqu'il s'agit d'une chaîne, il représente le nom enregistré ou le nom de balise du composant.
• 3. Tout paramètre et événement peut être téléchargé vers les composants dynamiques des composants et sera reçu par tous les composants actuels sur
• En termes simples, le composant est comme un conteneur, le composant à restituer est déterminé en fonction de l'attribut is, et il n'y a aucune différence dans les autres

<template>
  <div class="home">
    <div class="nev">
      <div
        class="nevbar"
        :class="nevindex == index ? 'newnev' : ''"
        v-for="(item, index) in tab"
        :key="index"
        @click="itemClick(index)"
      >
        {
    
    {
    
     item }}
      </div>
    </div>
    <div>
      <component :is="tabsIndex[nevindex]"></component>
    </div>
  </div>
</template>

<script>
import one from "../components/one.vue";
import two from "../components/two.vue";
import three from "../components/three.vue";
export default {
    
    
  name: "HomeView",
  components: {
    
    
    one,
    two,
    three,
  },
  data() {
    
    
    return {
    
    
      tab: ["列表1", "列表2", "列表3"],
      tabsIndex: ["one", "two", "three"],
      nevindex: 0,
      ISshow: "one",
    };
  },
  methods: {
    
    
    // nev切换
    itemClick(index) {
    
    
      this.nevindex = index;
    },
  },
  created() {
    
    },
};
</script>
<style scoped lang="scss">
.nev {
    
    
  display: flex;
  justify-content: space-around;
}
.newnev {
    
    
  color: aqua;
}
</style>

Comment transmettre la valeur du composant parent du composant dynamique

<component
  name="乞力马扎罗"
  @getClick="getClick"
  :is="tabsIndex[nevindex]"
></component>

//js中
 methods: {
    
    
    //子组件传的值
    getClick(e) {
    
    
      console.log(e);
    },
  },

Comment le sous-composant du composant dynamique accepte-t-il la valeur transmise

<template>
    <div>
        <h2>one页面{
    
    {
    
    name}}</h2>
        <button @click="handClick">子组件</button>
    </div>
</template>
<script>
export default {
    
    
    props:{
    
    
        name:{
    
    
            type:String,
            default:''
        }
    },
    methods:{
    
    
        handClick(){
    
    
            this.$emit('getClick',"接受到了子组件的值")
        },
    }
}
</script>

Rencontrez Keep-Alive

• v-si leur commutation entraînera la destruction du composant, qui sera surveillé ici

 //组件卸载
 unmounted(){
    
    
 },

• Inconvénient, l'état des données n'est pas sauvegardé
• Restez en vie, enveloppez-le avec keep-alive
• keep-alive a certaines propriétés
• 1. Le nom stocké dans include est l'attribut de nom du composant lui-même, et seuls les composants dont les noms correspondent seront mis en cache.
• 2, exclure, tout composant portant un nom correspondant ne sera pas mis en cache
• 3, max, combien d'instances de composant peuvent être mises en cache au maximum, une fois ce nombre atteint, l'instance du composant de cache qui n'a pas été mise en cache récemment sera détruite
• Voici trois façons d’écrire

//字符串
 <keep-alive include="homeone,hometwo">
   <component
     name="乞力马扎罗"
     @getClick="getClick"
     :is="tabsIndex[nevindex]"
   ></component>
 </keep-alive>
 //正则
 <keep-alive :include="/homeone|hometwo/">
   <component
     name="乞力马扎罗"
     @getClick="getClick"
     :is="tabsIndex[nevindex]"
   ></component>
 </keep-alive>
 //数组
 <keep-alive :include="['homeone', 'hometwo']">
   <component
     name="乞力马扎罗"
     @getClick="getClick"
     :is="tabsIndex[nevindex]"
   ></component>
 </keep-alive>

Le cycle de vie du composant cache

• À l'intérieur du composant

//缓存组件的生命周期，进入活跃状态
   activated(){
    
    
     console.log("活跃")
   },
   //离开
   deactivated(){
    
    
     console.log("离开")
   }

Les composants asynchrones, emballés séparément, réalisent le sous-package webpack,

Comment regrouper les composants séparément pour faciliter la vitesse de chargement de la page d'accueil

Composants asynchrones de solution de contournement

• Dans vue, grâce à la fonction fournie par vue, définirAsyncComponent
• La fonction d'importation permet à Webpack de sous-packager les fichiers importés
• Finalité : Il peut être sous-traité
• étape:

//异步组件
import {
    
    defineAsyncComponent} from 'vue'
//工厂函数写法，返回promise对象
const threevue=defineAsyncComponent(()=>import("../components/three.vue"))

• npm exécuter la construction

Processus d'empaquetage par défaut du sous-paquet de code

• Par défaut, lors du processus de construction de l'intégralité de l'arborescence des composants, étant donné que les composants et les composants dépendent directement des modules, wbpack regroupera les modules de composants ensemble lors de l'empaquetage.
• À l'heure actuelle, alors que le projet continue de croître, le contenu du fichier app.js est trop volumineux, ce qui entraînera un ralentissement de la vitesse de rendu du premier écran.
• Lors de l'emballage, le sous-paquet du code
• Pour certains composants qui n'ont pas besoin d'être utilisés immédiatement, ils peuvent être divisés séparément et divisés en petits blocs de code chunk.js
• Ces chuck.js seront chargés depuis le serveur en cas de besoin et exécuteront le code