可直接用 provide/inject 传递响应式图标状态，父组件通过 ref 定义并 provide，子组件 inject 后用 v-if 或 computed 动态切换图标，所有组件共享同一响应式引用实现自动同步。
可以直接用 provide/inject 把父组件的响应式状态（比如一个布尔值或图标类型）传给任意深度的子组件，子组件再根据这个状态决定显示哪个图标。关键在于状态要响应式、注入要正确声明、图标切换逻辑要清晰。
父组件提供图标控制状态
在父组件中定义一个响应式变量（如 iconState），并通过 provide 暴露出去。推荐用 ref 或 reactive，确保子组件能响应变化：
- 使用
ref管理简单状态，例如：const iconState = ref('menu')或ref(false) - 在
setup()中调用provide('iconState', iconState) - 如果需要切换逻辑（如点击按钮翻转图标），直接修改
iconState.value
子组件注入并绑定图标
在任意嵌套层级的子组件中，用 inject 获取该状态，并用于条件渲染图标：
- 声明注入：
const iconState = inject('iconState') - 配合
v-if/v-show或三元表达式切换图标，例如：<IconMenu v-if="iconState.value === 'menu'" /> - 也可用计算属性封装图标名：
const currentIcon = computed(() => iconState.value ? 'close' : 'menu')，再绑定到图标组件的name属性
实战：点击父区域切换子图标（含状态同步）
假设父组件是导航栏，子组件是侧边栏开关图标，点击 Logo 切换图标并控制 aside 显隐：
- 父组件（App.vue）中：
const asideVisible = ref(false); provide('asideVisible', asideVisible) - 子组件（Topnav.vue）中注入后绑定
@click="asideVisible.value = !asideVisible.value" - 另一个子组件（Aside.vue）中注入同一
asideVisible，用v-if="asideVisible.value"控制显隐，同时用:name="asideVisible.value ? 'close' : 'menu'"切换图标 - 所有组件读取的是同一个响应式引用，状态自动同步，无需事件总线或 props 逐层透传
注意事项与优化点
避免常见坑，让切换更健壮：
- 注入时建议加默认值或类型断言，尤其在 TypeScript 项目中：
inject<Ref<boolean>>('asideVisible', ref(false)) - 不要在
inject后直接解构赋值（如const { value } = inject(...)），会丢失响应性；始终通过.value访问和修改 - 图标资源建议统一管理为字符串常量或枚举，便于维护和 IDE 提示
- 若需动画过渡，可在图标容器上加
<transition>，配合v-if触发进入/离开效果
