在动态组件上使用 keep-alive

倖福魔咒の 提交于 2020-01-29 03:59:04

在动态组件上使用 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,查看效果!!效果如下
在这里插入图片描述

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!