slot的用法 简单切换卡

子组件

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <div class="tabbar">
      <div :class="[activeindex==index?'list listactive':'list']" v-for="(t,index) in tabs" @click="tabclick(index)">{{t.text}}</div>
    </div>
    <slot :name="j.text" v-for="(j,index) in tabs" v-if='activeindex==index'></slot>
  </div>
</template>

<script>
  export default {
    props:['tabs'],//传递给父组件的数组
      data: function(){
        return {
          activeindex:0//默认第一个tab内容为0
        }
      },
    computed: {

    },
    methods:{
      tabclick(index){
        this.activeindex=index //将当前索引赋给某个变量 当前索引等于activeindex的时候显示
      }
    },
    components: {

    }
  }
</script>

<style scoped>
.tabbar{
  overflow:hidden;
  width:100%;
  height:40px;
}
  .list{
    float:left;
    margin-right:30px;
    background:pink;
    width:100px;
    height:40px;
    text-align:center;
    line-height:40px;
    color:#fff
  }
  .listactive{
    background:gray;
  }
</style>
```html

父组件

```vue
<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child :tabs="tabs" @tabclick="tabclick">
      <div slot="tab1">tab1内容</div>
      <div slot="tab2">tab2内容</div>
      <div slot="tab3">tab3内容</div>
    </child>
  </div>
</template>
<script>
  import Child from '../components/HelloWorld.vue'
  export default {
    data: function () {
      return {
        msg: '',
        tabs:[{text:'tab1',value:'1'},{text:'tab2',value:'2'},{text:'tab3',value:'3'}]
      }
    },
    methods: {
      tabclick(index){
        console.log(index);

      }
    },
    components:{
      'child': Child
    }
  }
</script>

<style scoped>
</style>
```vue