slot 插槽制作的tabs标签页

父组件：

<template>
  <div class="wrap">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" editable   @tab-remove="removeTab">
      <el-tab-pane :label="item" :name="item" v-for="(item, index) in editableTabs" :key="item">{{item}}</el-tab-pane>
    </el-tabs>
    <ul>
      <Temp :data="datas">
        <template slot-scope="scope">
          {{scope.item}}
        </template>
      </Temp>
    </ul>

   </div>
 </template>
<script>
import Temp from '../components/temp'
import TempA from '../components/tempA'
export default {
  name: 'practice',
  components: { Temp, TempA },
  data () {
    return {
      activeName: '用户管理',
      datas: [],
      editableTabs: ['用户管理', '配置管理', '角色管理', '定时任务补偿']
    }
  },
  mounted () {
   // 初始化数据
    this.$set(this.datas, 0, '用户管理')
  },
  methods: {
    handleClick (tab, event) {
      this.$set(this.datas, 0, tab.label)
    },
    removeTab(targetName) {
      if (targetName === this.datas[0]){
        this.datas.shift()
      }
      this.editableTabs.forEach((item, index)=>{
        if(targetName === item){
            this.editableTabs.splice(index, 1)
          this.activeName = this.editableTabs[0]
          this.$set(this.datas, 0, this.editableTabs[0])
        }
      })
    }
  }
}
</script>

<style scoped>
*{
  list-style: none;
}
  .wrap{
    width: 500px;
    margin: 0 auto;
  }
</style>

子组件：

<template>
  <div class="wrapInner">
      <slot v-for="item in data" :item="item"></slot>
  </div>
</template>

<script>
export default {
  name: 'temp',
  props: {
    data: {
      type: Array
    }
  },
  data: function () {
    return {

    };
  },
  computed: {

  },
  mounted: function () {
      console.log(this.data)
  },
  methods: {

  }
}
</script>

<style scoped>
  .wrapInner{
    width: 500px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 0 auto;
  }
</style>