vuejs2.0动态组件实现tab选项卡切换

这两天帮朋友写网站，刚好最近学习了vuejs，就试着用vue+bootstrap写了起来，编写过程中实践与理论结合的确学到很多东西，也遇到不少坎儿，不过通过百度以及官网等查资料找到了理想的解决方法，本来tab切换用实现的方法有很多种，也很简单，但是基于本人刚学习vuejs这块内容，感觉开始还是很吃力，在网上找了一些关于vuejs组件的博客，看了之后结合自己的理解，重新整理了下，不废话了直接上代码，请大牛们指导！

//template 模板

<template>
  <div class="source">
    <div class="tab-title">
      <p @click="tabToggle(tab1)">tab1</p>
      <p @click="tabToggle(tab2)">tab2</p>
      <p @click="tabToggle(tab3Text)">tab3</p>
    </div>
    <div class="tabs">
      <component :is='currentView' keep-alive></component>
    </div>
  </div>
</template>

//js部分

<script type="text/ecmascript-6"> 
import tab1 from '../tab/tab1'  
import tab2 from '../tab/tab2'  
import tab3 from '../tab/tab3'  
export default { 
    data () { 
        return { 
            tab1: 'tab1', 
            tab2: 'tab2', 
            tab3: 'tab3', 
            currentView: 'tab1'  
        } 
    }, 
    components: { 
        tab1,
        tab2,
        tab3 
    }, 
    methods: { 
        tabToggle (tabText) { 
            this.currentView = tabText 
        } 
    } 
} 
</script>