标签页切换通过子组件点击触发$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 @click="handleClick">）绑定点击逻辑
• handleClick() 方法内执行 this.$emit('tab-click', this.index)

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

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

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 初始化时可设默认值：data() { return { activeIndex: 0 } }
• 在子组件标签上写：<tab-item v-for="(item, i) in tabs" :key="i" :index="i" @tab-click="activeIndex = $event" />
• 也可用方法封装：@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" @input="activeIndex = $event" />

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

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

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