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
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>
simple1.vue:
<template> <div> 这是页面一 <input type="text"> </div> </template>
simple2.vue:
<template> <div> 这是页面二 <input type="text"> </div> </template>
Wenn sich im obigen Beispiel der Wert von tabView ändert, rendert
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 2020
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!