Vue依赖注入（Provide/Inject）是实现主题换肤跨层级传递的轻量方案，通过Symbol唯一标识、ref响应式数据、局部覆盖与fallback机制，配合CSS变量实现无感主题切换。
Vue 的依赖注入（Provide/Inject）是实现主题换肤状态跨层级传递的轻量级方案，它避免了 props 层层透传，也无需引入状态管理库，关键在于稳定标识 + 响应式数据 + 合理作用域。
用 Symbol 作为注入 key 避免命名冲突
主题状态属于全局但需隔离（比如多个主题区域并存），直接用字符串 key 容易被意外覆盖。推荐用 Symbol 创建唯一、不可枚举的注入标识：
// themeSymbol.js
export const ThemeSymbol = Symbol('theme')在顶层组件（如 App 或 Layout）中提供：
import { provide, ref, watch } from 'vue'
import { ThemeSymbol } from './themeSymbol'
<p>export default {
setup() {
const theme = ref('light') // 或从 localStorage 读取</p><pre class="brush:php;toolbar:false;">// 同步到 localStorage（可选）
watch(theme, (newVal) => {
localStorage.setItem('theme', newVal)
})
provide(ThemeSymbol, {
theme,
toggle: () => {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
})
return () => <div>...</div>} }
子组件用 inject 消费且保持响应式
任意深层组件只需注入即可访问和修改主题，无需关心层级深度。注意：必须解构时保留响应性（不能直接解构 theme）：
import { inject } from 'vue'
import { ThemeSymbol } from './themeSymbol'
<p>export default {
setup() {
const { theme, toggle } = inject(ThemeSymbol)</p><pre class="brush:php;toolbar:false;">// ✅ 正确：theme 是 ref，.value 可响应更新
// ❌ 错误：const { theme } = inject(...) → theme 变成普通字符串，失去响应性
return () => (
<div class="{`theme-${theme.value}`}">
<button onclick="{toggle}">切换主题</button>
</div>
)} }
支持局部主题覆盖与 fallback
某些区域可能需要独立主题（如弹窗、第三方嵌入模块），可在局部组件再次 provide 覆盖上级主题：
setup() {
const localTheme = ref('high-contrast')
provide(ThemeSymbol, {
theme: localTheme,
toggle: () => { /* 仅影响本区域 */ }
})
return () => <slot></slot>
}为防注入失败（如未在祖先链中 provide），inject 支持默认值：
const themeContext = inject(ThemeSymbol, {
theme: ref('light'),
toggle: () => {}
})配合 CSS 变量实现样式无感切换
主题状态驱动根节点 class 或 CSS 自定义属性，让样式层自动响应：
<style scoped>
.root {
--text-color: #333;
--bg-color: #fff;
}
<p>.root.theme-dark {
--text-color: #eee;
--bg-color: #1e1e1e;
}
</style><p><template><div :class="['root', 'theme-' + theme.value]">
<p :style="{ color: 'var(--text-color)' }">文字</p>
</div>
</template></p>这样组件只关注 class 或变量名，不感知主题具体值，真正实现“无感”传递与使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
