<template>
  <div id="app">
    <div class="radio-wrap">
      <div class="radio-group" v-model="tabView"> 
        <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))">{{tab.name}}</span>
      </div>
      <div style="margin:10px 0;"></div>
      <keep-alive> 
        <component v-bind:is="tabView"></component>
      </keep-alive> 
    </div>
  </div>
</template>
 
<script>
  import select1 from './components/select01.vue';
  import select2 from './components/select02.vue';
  import select3 from './components/select03.vue';
export default {
  name: 'app',
  data () {
    return {
      tabView: 'select1',
      tabs: [{name: "選項一"}, {name: "選項二"} ,{name: "選項三"}],
      iscur: 0
    }
  },
  components: {
    select1,
    select2,
    select3
  },
  methods: {
    tabChange:function(tab){
      this.tabView = tab;
    }
  }
}
</script>
 
<style>
  .radio-group{font-size:0;height: 26px;line-height:26px;}
  .radio-group>span{cursor:pointer;display:inline-block;font-size:16px;text-align:center;width:100px;}
  .cur{color:#fff;background-color: #20a0ff;}
</style>
 

<template>
  <div>
    <div class="tab" @click="toggleTab('prince')"><a>小王子</a></div>
    <div class="tab" @click="toggleTab('rose')"><a>小玫瑰</a></div>
    <div class="tab" @click="toggleTab('fox')"><a>小狐狸</a></div>
    <keep-alive>
      <prince :is="currentTab"></prince>
    </keep-alive>
  </div>
</template>

<script>
import prince from '@/components/prince'
import rose from '@/components/rose'
import fox from '@/components/fox'
export default {
  name: 'index',
  data () {
    return {
      currentTab: 'prince'
    }
  },
  components: { // 宣告子元件
    prince,
    rose,
    fox
  },
  methods: {
    toggleTab: function (tab) {
      this.currentTab = tab // tab 為當前觸發標籤頁的元件名
    }
  }
}
</script>

<style scoped>
</style>