Heim > Web-Frontend > View.js > Hauptteil

Wie implementiert Vue eine teilweise Aktualisierung? (Codebeispiel)

青灯夜游
Freigeben: 2020-10-30 17:52:51
nach vorne
3745 Leute haben es durchsucht

Wie implementiert Vue eine teilweise Aktualisierung? (Codebeispiel)

Wir alle wissen, dass die Komponentisierung der leistungsstärkste Kern von Vue ist und dass das Routing auch für einige große Komponenten geeignet ist. Beim Betrachten des URL-Pfads wird es jedoch Änderungen geben, aber manchmal möchten wir Für einige kleine lokale Aktualisierungen müssen Sie zu diesem Zeitpunkt die dynamischen Komponenten verwenden.

Das von Vue selbst beibehaltene -Element kann die Komponente dynamisch an das is-Attribut binden, wodurch die dynamische Komponentenumschaltung einfach implementiert werden kann

Der Code lautet wie folgt: slotsDome.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>
Nach dem Login kopieren

simple1.vue:

<template>
  <div>
    这是页面一
    <input type="text">
  </div>
</template>
Nach dem Login kopieren

simple2.vue:

<template>
  <div>
    这是页面二
    <input type="text">
  </div>
</template>
Nach dem Login kopieren

Wenn sich im obigen Beispiel der Wert von tabView ändert, rendert die entsprechende Komponente, was dem Effekt des Routings sehr ähnlich ist, aber die Adressleiste hat sich nicht geändert

Auf diese Weise wird jedoch jede Komponente jedes Mal neu gerendert, wenn die Komponente gewechselt wird, und die Daten auf der Komponente können nicht beibehalten werden. Zu diesem Zeitpunkt können Sie Keep-Alive verwenden, um die Komponente im Speicher zu belassen und ein erneutes Rendern zu vermeiden Zusammenfassung (mit Antworten)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020Wie implementiert Vue eine teilweise Aktualisierung? (Codebeispiel)

Weitere Programmierkenntnisse finden Sie unter:
Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWie implementiert Vue eine teilweise Aktualisierung? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage