Vue でのキーキープアライブのコード例分析-jsチュートリアル-php.cn

Vue でのキーキープアライブのコード例分析

不言

リリース： 2018-09-18 14:38:45

オリジナル

1675 人が閲覧しました

この記事の内容は、Vue でのキーキープアライブのコード例の分析に関するものです。必要な方は参考にしていただければ幸いです。

keep-alive key

<!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>

ログイン後にコピー

Key は再利用されない識別要素です。key は Vue の予約属性であり、それ以外の場合は props としてサブコンポーネントに渡すことができないことに注意してください。 Vue のエラー

を見たコントロール内にありますが、キープアライブフラグはコンポーネントインスタンスを繰り返し作成しません。つまり、created Mount イベントをトリガーするのは 1 回だけです ##。

#両方を使用できます。コンポーネントの再利用はより慎重に管理されます

以上がVue でのキーキープアライブのコード例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。