Codebeispielanalyse des Schlüssel-Keepalive in Vue-js-Tutorial-php.cn

Codebeispielanalyse des Schlüssel-Keepalive in Vue

不言

Freigeben： 2018-09-18 14:38:45

Original

1674 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!