VUE-使用is对多个组件进行切换，类似于tab切换

使用<component>占位，展示组件，is用于指定绑定的是哪个组件

<template>
  <div class="root">
    <a href="" @click.prevent="comName='one'">一班</a>
    <a href="" @click.prevent="comName='two'">二班</a>
    <a href="" @click.prevent="comName='three'">三班</a>
    <component :is="comName"></component>
   
    <!--这种方式也可以，只是需要调整样式<div  @click="comName='one'">一班</div>
    <div  @click="comName='two'">二班</div>
    <div @click="comName='three'">三班</div>-->
    
  </div>
</template>

<script>
import one from './one'
import two from './two'
import three from './three'
export default {
  components:{
    one,two,three
  },
  data() {
    return {
      comName:'one'
    };
  },
  methods: {
   
  },
};
</script>
<style lang="stylus" scoped>
.root {
  margin: 20px 100px;
  width 80%
  height 60%
  border 1px solid red
  a {
    margin-right 20px
    line-height 50px
  }
}
</style>