vue 3 中可用 v-bind 在 style 上绑定 css 变量，语法为 :style="{ '--var-name': value }"，变量名须带 -- 前缀，值自动转字符串；子组件不生效常因 shadow dom、all: initial 或未用 var() 读取；相比 :class，v-bind 更适合数值型微调，:class 适合整套主题切换；vue 2 不支持该写法，需字符串拼接或计算属性模拟。
Vue 3 中用 v-bind 在 style 上绑定 CSS 变量的写法
Vue 3 支持在 <template></template> 的 style 属性中直接使用 v-bind 绑定响应式数据为 CSS 自定义属性（即 CSS 变量），语法简洁且原生支持，无需额外插件。
关键点是：必须用双大括号包裹整个 v-bind 表达式，并且键名要带两个短横线前缀（--），值会自动转为字符串注入到内联样式中。
<div :style="{ '--primary-color': themeColor }"> ✅ 正确，<code>--primary-color是合法 CSS 变量名<div :style="{ 'primary-color': themeColor }"> ❌ 不会生效，缺少 <code>--前缀，浏览器不识别为自定义属性<div :style="{ '--bg-opacity': opacity }"> ✅ 支持数值，Vue 会自动转成字符串（如 <code>0.8→"0.8"）为什么
v-bind绑定的 CSS 变量在子组件里不生效CSS 变量作用域默认是**继承 + 局部作用域**，父组件通过
:style设置的--xxx只影响该元素自身及其后代，但若子组件用了shadow DOM（比如某些 UI 库封装的 Web Component）、或显式写了all: initial/all: unset，就会切断继承链。- 检查子组件根元素是否加了
all: initial—— 这会重置包括继承属性在内的所有 CSS 属性 - 确认子组件模板中是否漏写了
inherit或未用var(--xxx)主动读取变量（例如：color: var(--text-color, #333);） - 如果子组件是独立
.vue文件且无特殊封装，通常只需确保父级元素正确设置了变量、子元素样式中调用了var()即可
v-bind动态 CSS 变量和:class切换类名哪种更合适取决于变更粒度和维护成本。CSS 变量适合微调（颜色、透明度、间距等数值型配置），
:class更适合整套视觉状态切换（如theme-dark/theme-light）。- 用
v-bind：适合实时响应用户操作（如滑块调节主色明度）、A/B 测试灰度发布、主题色动态生成等场景 - 用
:class：适合预设主题、高对比度模式切换、布局方向（LTR/RTL）等需批量替换多条样式的场合 - 性能上两者差异极小；但大量使用内联
v-bind会让 DevTools 的 Styles 面板变杂乱，不利于调试 - 混合使用很常见：用
:class控制大框架（is-dark），再用v-bind微调其中某几个变量（--accent-hue）
Vue 2 能不能用同样的写法
不能。Vue 2 的
v-bind:style**不支持直接绑定带--前缀的 key**，会因对象 key 含非法字符报错或静默忽略。Vue 2 下必须绕过语法限制：
- 写成字符串拼接：
:style="`--primary-color: ${themeColor}; --font-size: ${fontSize}px`" - 或封装成计算属性返回完整样式字符串：
computed: { dynamicStyle() { return `--primary-color: ${this.themeColor};`; } }，再:style="dynamicStyle" - 注意：字符串方式无法做响应式依赖追踪优化，建议只用于简单场景；复杂逻辑仍推荐升级到 Vue 3
真正容易被忽略的是：CSS 变量本身没有类型校验，
themeColor若为null、undefined或空字符串，会导致var(--primary-color)回退失败——务必在 JS 层做兜底（比如themeColor || '#409eff'）。- 检查子组件根元素是否加了
