VUE tab组件用is的例子

<template>
  <div class="root">   
    <div  @click="comName='one'">一</div>
    <div  @click="comName='two'">二</div>
    <div @click="comName='three'">三</div>-->
     <component :is="comName"></component>
  </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>
 
 
 
<!-- 组件会在 `件名` 改变时改变 -->
<component :is="组件名变量"></component>
 <ul>
  <li is='my-component'></li>
  </ul>