Comment Vue implémente-t-il l'actualisation partielle ? (exemple de code)

Nous savons tous que la composantisation de Vue est son noyau le plus puissant, et le routage est également une partie particulièrement mignonne. Cependant, le routage convient à certains composants volumineux. , des changements se produiront, mais parfois nous souhaitons quelques petites actualisations locales. Pour le moment, nous devons utiliser ses composants dynamiques.

L'élément retenu par Vue lui-même peut lier dynamiquement des composants à l'attribut is, réalisant ainsi facilement une commutation dynamique des composants

Le code est le suivant : slotDome.vue :

<template>
  <div>
    <slot></slot>
    <slot name="wise"></slot>
 
    <el-radio-group v-modal="tabView">
      <el-radio-button label="simple1" @click="toSim(1)">
        <button>页面一</button></el-radio-button>
      <el-radio-button label="simple2" @click="toSim(2)"><button>页面二</button>
      </el-radio-button>
    </el-radio-group>
    <keep-alive>
      <component :is="tabView"></component>
    </keep-alive>
  </div>
</template>
<style rel="stylesheet/stylus">
  el-radio-button
    &:hover
      cursor pointer
</style>
<script>
  import simple1 from "./simple/simple1.vue";
  import simple2 from "./simple/simple2.vue";
  export default{
    data(){
      return {
        tabView: "simple1"
      }
    },
    methods: {
      toSim(index){
        this.tabView = `simple${index}`;
      }
    },
    components: {
      simple1,
      simple2
    }
  }
</script>

simple1.vue :

<template>
  <div>
    这是页面一
    <input type="text">
  </div>
</template>

simple2.vue :

<template>
  <div>
    这是页面二
    <input type="text">
  </div>
</template>

Dans l'exemple ci-dessus, lorsque la valeur de tabView change, L'effet est très similaire, mais la barre d'adresse n'a pas changé

Mais de cette façon, chaque fois que le composant est commuté, il sera restitué et les données sur le composant ne pourront pas être conservées. À ce stade, vous pouvez utiliser keep-alive pour conserver le composant en mémoire afin d'éviter un nouveau rendu

L'effet de page est le suivant :

Recommandations associées :

Un résumé des questions d'entretien avec vue frontale en 2020 (avec réponses)

Recommandation du tutoriel vue : 2020 dernière 5 sélections de didacticiels vidéo vue.js

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

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!