标签页切换通过子组件点击触发$emit传递索引实现：tabitem接收index，点击时emit'tab-click'事件；父组件监听并更新activeindex，再通过props传回isactive控制样式，支持v-model双向绑定。

标签页切换时通过 $emit 传递激活索引，核心是子组件（每个 tab 项）在点击时主动通知父组件“我被选中了”，父组件监听事件并更新当前激活的索引。

子组件：TabItem 触发 click 事件并 emit 索引

每个标签页项（如 TabItem）应接收一个唯一索引（比如 index），点击时调用 this.$emit('tab-click', index)。注意不要直接修改 props，而是靠事件通知父级。

• 确保子组件使用 v-for 渲染时绑定正确的 :key 和 :index
• 模板中给触发区域（如 <div>）绑定点击逻辑 <li> <code>handleClick() 方法内执行 this.$emit('tab-click', this.index)

父组件：监听事件并同步激活状态

父组件维护一个响应式数据（如 activeIndex），用 @tab-click 监听子组件发出的事件，并更新该值。


vue-admin-change-reviewer
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
下载
• 初始化时可设默认值：data() { return { activeIndex: 0 } }
• 在子组件标签上写：<tab-item v-for="(item, i) in tabs" :key="i" :index="i"></tab-item>
• 也可用方法封装：@tab-click="onTabClick"，然后 onTabClick(index) { this.activeIndex = index }

配合 v-model 实现双向绑定（可选进阶）

如果希望像原生表单一样支持 v-model，可在子组件中监听 value prop 并 emit input 事件；父组件用 v-model 绑定 activeIndex 即可自动同步。

• 子组件：props: ['value'], methods: { handleClick() { this.$emit('input', this.index) } }
• 父组件：<tab-item v-for="(item, i) in tabs" :key="i" :value="activeIndex"></tab-item>

样式联动：根据 activeIndex 高亮当前 tab

父组件把 activeIndex 传给每个 TabItem，子组件用 :class 或 :style 控制是否激活。

• 父组件传入：<tab-item :is-active="activeIndex === i"></tab-item>
• 子组件内部：<div :class="{ 'active': isActive }"> </div>