父组件：
<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>