在动态组件上使用 keep-alive

在动态组件上使用 keep-alive

<

<div id="app">
        <button @click="A">A</button><button @click="B">B</button>
        <hr>
        <div>没有加keep-alive标签的</div>
        <component :is="type"></component>
        <hr>
        <div>加了keep-alive标签的</div>
        <keep-alive>
            <component :is="type"></component>
        </keep-alive>
        
    </div>

<style>
    span{
        margin-right: 12px;
        display: inline-block;
        background-color: royalblue;
        color: white;
    }
</style>

 <script>
       var A = {
           data:function(){
               return{
                note:'click on a blog title '
               }
           },
           template:`
                <div>
                    <span @click="A1">A1</span>
                    <span @click="A2">A2</span>
                    <span @click="A3">A3</span>  
                    <p>{{note}}</p>
                </div>
           `,
           methods:{
               A1:function(){
                   this.note ="我是A1";
               },
               A2:function(){
                   this.note ="我是A2";
               },
               A3:function(){
                   this.note ="我是A3";
               },
           }
       }
       var B = {
           data:function(){
               return{
                note:'我是B '
               }
           },
           template:`
                <div>
                    <p>{{note}}</p>
                </div>
           `,
           
       }
        new Vue({
            el:'#app',
            data:{
                type:'A'
            },
            components:{
              A,B
            },
            methods:{
                A:function(){
                   this.type ="A";
               },
               B:function(){
                   this.type ="B";
               },
            }
        })

    </script>

分别点击A1或A2或A3，然后点击B，在点击A，查看效果！！效果如下