vue tab切换

第一步：在主vue组件使用 <keep-alive> 标签，定义tab
<template>
<div class="post-topheader">
<a @click="changeMain('mainv3')"> changemainv3</a>
<a @click="changeMain('mainv2')"> changemainv2</a>

      <keep-alive>   
        <component v-bind:is="mainView"></component>  
      </keep-alive>     

</div>
</template>

第二步：在主vue组件import导入子vue组件，定义components，定义method

<script>

import mainv2 from './mainv2.vue'
import mainv3 from './mainv3.vue'

export default {
name: 'mainv',
data () {
return {
mainView:'mainv2'
}
},

components: {
mainv2,
mainv3
},
methods:{

changeMain:function(tab){  
    //alert(22);
    this.msg='call time '+new Date();
    this.mainView = tab;  
    //alert(this.mainView);
  }

}

}
</script>