Heim >Web-Frontend >js-Tutorial >Codebeispielanalyse des Schlüssel-Keepalive in Vue
Codebeispielanalyse des Schlüssel-Keepalive in Vue
- 不言Original
- 2018-09-18 14:38:451665Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Codebeispielanalyse von Key-Alive in Vue. Ich hoffe, dass er für Sie hilfreich ist.
Keep-Alive-Schlüssel
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<p id="app">
<keep-alive>
<child-component key="1" v-if="seen" name="1"></child-component>
<child-component key="2" v-if="!seen" name="2"></child-component>
</keep-alive>
<button @click="toggle">toggle</button>
</p>
<script type="text/javascript">
Vue.component('child-component', {
template: `<input type="text" placeholder="enter">`,
data() {
return {}
},
props: ["name"],
mounted() {
console.log(`${this.name} mounted`)
}
})
const vm = new Vue({
el: "#app",
data: {
seen: true
},
methods: {
toggle() {
this.seen = !this.seen;
}
}
})
</script>
</body>
</html>
Schlüssel ist das Identifikationselement und wird nicht mehr wiederverwendet. Beachten Sie, dass der Schlüssel ein reserviertes Attribut in Vue ist und andernfalls nicht als Requisiten an Unterkomponenten übergeben werden kann Es wird in der Steuerung angezeigt. Ich habe den Fehlerbericht von Vue gesehen
, aber das Keep-Alive-Flag erstellt keine wiederholten Komponenteninstanzen, das heißt, das created mounted-Ereignis wird nur einmal ausgelöst
Die beiden können zur Wiederverwendung von Komponenten verwendet werden. Relativ detaillierte Verwaltung
Das obige ist der detaillierte Inhalt vonCodebeispielanalyse des Schlüssel-Keepalive in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!