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