Vue 3 中通过 provide/inject 共享响应式 Tab 状态并配合 setActiveTab 方法，实现跨组件自动激活；子组件注入后基于 activeTab.value 响应式更新 UI，支持路由、菜单、快捷键等外部触发，需注意 Symbol 命名与避免重复 provide。
在 Vue 3 的组合式 API 中，inject 本身不直接“激活” Tab，但它能配合响应式状态和事件总线机制，让多个无直接父子关系的组件共享当前选中 Tab 的状态，并自动响应切换 —— 这就是实现跨组件 Tab 自动激活的核心逻辑。
用 provide/inject 共享可响应的 Tab 状态
在 Tab 容器（如 TabContainer）中，用 ref 或 reactive 定义当前激活的 key，并通过 provide 暴露出去：
- 推荐用
ref+computed双向绑定，确保子组件读取的是响应式值 - 提供一个
setActiveTab方法，供任意子组件（包括非直系 TabPane）调用触发切换 - 避免直接
provide原始字符串或数字，否则子组件无法响应变化
子组件用 inject 主动订阅并同步激活态
每个 Tab 页签组件（如 UserListTab、OrderDetailTab）在 setup 中 inject 状态和方法：
- 用
inject('activeTab')获取当前 key，配合v-if或 class 切换显隐/样式 - 在
onMounted或首次渲染时，检查自身标识是否匹配activeTab.value，自动对齐 UI 状态 - 无需手动监听，因为
activeTab是响应式引用，模板中直接使用即可触发重渲染
支持外部触发：URL 参数、按钮、快捷键一键跳转
当 Tab 激活需要从容器外发起（比如导航菜单点击、地址栏 hash 变化），只需调用注入的 setActiveTab：
- 菜单组件
inject后，点击项直接执行setActiveTab('order') - 路由守卫中解析
route.query.tab，同步到activeTab.value - 键盘按 Ctrl+1 ~ Ctrl+9，映射到对应 Tab key 并激活（提升可访问性）
注意边界：避免循环依赖与命名冲突
provide/inject 是隐式通信，容易在复杂嵌套中失控：
- 为每个
provide的 key 使用唯一 Symbol 或带作用域的字符串（如'tab-manager-active-key'） - 不要在多个层级重复
provide同名内容，否则下层inject会拿到最近的，行为不可预期 - 若 Tab 内容需异步加载，把 loading 状态也一并
provide，让各子组件统一处理骨架屏
