vue2.0使用動態組件實現tab切換效果（vue-cli）

<template>
    <div>
    　　<div>#動態組件實現tab切換效果#</div><br><br><br>
    　　　　<nav>
    　　　　　　<a href="javascript:void(0);" @click="toggleTabs(first);">{{first}}</a>
            　 　　<a href="javascript:void(0);" @click="toggleTabs(second);">{{second}}</a>
            　　　 <a href="javascript:void(0);" @click="toggleTabs(third);">{{third}}</a>
    　　　　</nav>

　　　　　　//動態地綁定到它的 is 特性，咱們讓多個組件可使用同一個掛載點，並動態切換。若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個 keep-alive 指令參數 
　　　　　　<first :is="currentView" keep-alive></first>
　　    </div>
</template>

<script  type="text/ecmascript-6">
//導入子組件
import first from 'components/first';
import second from 'components/second';
import third from 'components/third';

export default {
        data () {
             return {
                 first: "first", //導航欄文本1
                second: "second", //導航欄文本2
                third: "third", //導航欄文本3
                currentView: 'first', //默認選中first子組件
             };
         },
         components: { 
             first,
             second,
             third
         },
         methods: {
             toggleTabs (tabText) {
                 this.currentView = tabText;
             }
         }
    }
</script>

//使用sass
<style lang="scss">
    nav{
        width:600px;
        background:#eeeeee;
        padding:0 10px;

　　　　　　& a{
        text-decoration: none;
        color:#000;
        display: inline-block;
        width:150px;
        text-align:center;
        background:#aaaaaa;
        padding:10px;
    　　}
　　　　} 
</style>

子組件

first.vue

<template>
    <div>我是第一個子組件</div>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="scss"></style>

second.vue

<template>
    <div>我是第二個子組件</div>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="scss"></style>

third.vue

<template>
    <div>我是第三個子組件</div>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="scss"></style>