vue 动态加载tab选项卡组件

• 动态组件进行切换时，会将上一个组件进行销毁，然后再挂载最新的组件；
• keep-alive: 保存了组件第一次生成时的状态；以后需要该组件，直接读取缓存中的组件就可以；不再执行挂载，销毁；从而提高了浏览器的性能；
• 在使用component这个自定义组件时，需要配合:is这个属性，动态绑定一个组件的名称；
• is后面的属性值是哪个组件的名称，显示哪个组件；不可以同时显示两个

• html

<div id="ap">
    vue 动态加载tab选项卡组件
    <div class="sel">
        <!--<button class="c1" @click="fn(1)" :class="{current:flag==1}">选项1</button>
        <button class="c2" @click="fn(2)" :class="{current:flag==2}">选项2</button>
        <button class="c3" @click="fn(3)" :class="{current:flag==3}">选项3</button>-->
        <button v-for="(item,index) in arr" @click="fn(index)" :class="{current:flag==index}">{{item.title}}</button>
    </div>
    <keep-alive>
        <component :is="name"></component>
    </keep-alive>
</div>
<template id="div1"><div class="sel1">aaa</div></template>
<template id="div2"><div class="sel2">bbb</div></template>
<template id="div3"><div class="sel3">ccc</div></template>

• javascript

let myC1={
        data(){
            return {};
        },
        methods:{

        },
        template:'#div1',
    };
    let myC2={
        data(){
            return {};
        },
        template:'#div2',
    };
    let myC3={
        data(){
            return {};
        },
        template:'#div3',
    };
    let ap=new Vue({
        el:'#ap',
        data:{
            name:'myC1',
            flag:0,
            arr:[{title:"选项1"},{title:"选项2"},{title:"选项3"},]
        },
        methods:{
            fn(data){
                this.flag=data;
                //this.name='myC'+data;
                this.name='myC'+(data+1);
            }
        },
        components:{
            myC1,myC2,myC3
        }
    })