请看完整代码：
<style> ul{margin:0;padding: 0;border-bottom: 1px solid;margin-bottom: 10px;} li{display:inline-block;margin-right:10px;cursor:pointer;} .active{color:#409eff;} </style> <div> <el-tabs v-model="activeKey"> <el-tab-pane label="用户管理"> 用户管理内容 <p>我是 A</p> </el-tab-pane> <el-tab-pane label="配置管理">配置管理内容</el-tab-pane> <el-tab-pane label="角色管理"> 角色管理内容 <p>我是 C</p> </el-tab-pane> <el-tab-pane label="定时任务补偿">定时任务补偿内容</el-tab-pane> </el-tabs> </div> <script> // 父组件 Vue.component('el-tabs', { props:{ value:{ type: [String, Number] } }, data: function(){ return { currentTab: this.value, // 存放 tab tabLists: [] } }, watch: { currentTab: function(){ this.updateStatus(); }, // 处理：父组件更改 value value: function(val, oldVal){ this.currentTab = val } }, template: ` <div> <ul> <li v-for='(item, index) in tabLists' :class='{active: item.name === currentTab}' @click='handleClick(index)' >{{item.label}}</li> </ul> <slot></slot> </div> `, methods: { // 取得 tab-pane getTabPanes: function(){ return this.$children.filter(item => { return item.$options.name === 'tab-pane' }) }, // 更新 tabLists updateTabLists: function(){ let tabLists = []; this.getTabPanes().forEach((item, index) => { if(!item.id){ item.id = index } tabLists.push({ label: item.label, name: item.id }) // 默认展示第一个 if(index === 0){ if(!this.currentTab){ this.currentTab = item.id; } } }) this.tabLists = tabLists; this.updateStatus() }, handleClick: function(index){ this.currentTab = this.tabLists[index].name; console.log(`name = ${this.currentTab}`) this.updateStatus() }, // 让子组件显示或隐藏 updateStatus: function(){ this.getTabPanes().forEach(item => { item.updateShow(this.currentTab === item.id) }) } } }); // 子组件 Vue.component('el-tab-pane', { name: 'tab-pane', props: { // 标签标题 label:{ type: String, default: '' }, // pane 的名字，不必填 name: [String, Number] }, data: function(){ return { // 显示与否，由父组件决定 show: false, // 不允许通过父组件更改 props 中的属性 name // 用 id 来替代 name 属性 id: this.name } }, created: function(){ this.$parent.updateTabLists(); }, template: ` <div v-if='show'> <slot></slot> </div> `, methods: { updateShow: function(v){ this.show = v; } } }); const app = new Vue({ el: '#app', data: { // 当前选中的 tab activeKey: 2 } }) </script> // 页面输出： // 第一行是 4 个 tab，现在是`角色管理`被选中 用户管理 配置管理 角色管理 定时任务补偿 角色管理内容 我是 C其他章节请看：