專案開發中，使用vue實現tab頁籤切換功能。具體例項如下：

（1）首先定義子元件，如下圖：

以select01.vue為例，子元件的原始碼如下：

1. <template>  
2.   <div slot='select01'>{{msg}}</div>  
3. </template>  
4. <script>  
5. export default {  
6.   data(){  
7.     return{  
8.       msg:"select01"  
9.     }  
10.   }  
11. }  
12. </script>  
13. <style lang="scss">  
14. </style>  

1. <template>  
2.   <div id="app">  
3.     <div class="radio-wrap">  
4.       <div class="radio-group" v-model="tabView">   
5.         <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))">{{tab.name}}</span>  
6.       </div>  
7.       <div style="margin:10px 0;"></div>  
8.       <keep-alive>   
9.         <component v-bind:is="tabView"></component>  
10.       </keep-alive>   
11.     </div>  
12.   </div>  
13. </template>  
14. <script>  
15.   import select1 from './components/select01.vue';  
16.   import select2 from './components/select02.vue';  
17.   import select3 from './components/select03.vue';  
18. export default {  
19.   name: 'app',  
20.   data () {  
21.     return {  
22.       tabView: 'select1',  
23.       tabs: [{name: "選項一"}, {name: "選項二"} ,{name: "選項三"}],  
24.       iscur: 0  
25.     }  
26.   },  
27.   components: {  
28.     select1,  
29.     select2,  
30.     select3  
31.   },  
32.   methods: {  
33.     tabChange:function(tab){  
34.       this.tabView = tab;  
35.     }  
36.   }  
37. }  
38. </script>  
39. <style>  
40.   .radio-group{font-size:0;height: 26px;line-height:26px;}  
41.   .radio-group>span{cursor:pointer;display:inline-block;font-size:16px;text-align:center;width:100px;}  
42.   .cur{color:#fff;background-color: #20a0ff;}  
43. </style>