Vue中CSS变量响应式绑定的核心方式有两种：一是通过:style在模板中动态注入（如{ '--color': textColor }），兼容所有版本；二是Vue 3.4+在<style module>中直接使用v-bind(textColor)，语义更清晰。
Vue 中让 CSS 变量响应式地绑定到组件状态，核心在于两种互补方式：一种是通过 :style 在模板中注入变量，另一种是在 <style module> 中直接用 v-bind() 引用响应式数据。两者都依赖 Vue 的响应式系统，但适用场景和写法逻辑不同。
用 :style 动态注入 CSS 变量（通用、灵活）
这是最常用也最兼容的方式，适用于所有 Vue 版本（2/3），无需额外配置。
- 语法必须是对象形式：
:style="{ '--color': textColor, '--size': fontSize + 'px' }"，不能写成字符串style="--color: {{ textColor }}"——后者会被当静态属性忽略 - 键名要带双短横线前缀（
--xxx），且含短横线的 key 必须加引号（如"--bg-opacity"） - 单位（
px、rem、%等）需手动拼接，Vue 不自动补全 - 值必须来自响应式源（
ref、computed或data属性），否则更新不会触发样式重计算
在 <style module> 中使用 v-bind()（Vue 3.4+，更简洁）
这种方式把响应式逻辑从模板“移进”样式层，语义更清晰，适合组件内局部变量控制。
- 仅在
<style module>标签下有效；普通<style>或<style scoped>中的v-bind()会被编译器忽略 - 写法直接：
color: v-bind(textColor);，但变量名只能是合法 CSS 标识符（不能含-、空格或数字开头） - 不支持表达式，如
v-bind(theme.primary)会报错；需先解构为顶层变量：const primary = computed(() => theme.value.primary) - 初始值建议设默认值（如
ref('#333')），避免首次渲染时变量为空导致样式断裂
子组件如何继承并使用这些变量
CSS 变量天然可继承，但需满足前提条件：
立即学习“前端免费学习笔记（深入）”；
- 父组件要把变量设在包裹子组件的容器上，而不是直接写在子组件标签的
:style上（后者只作用于子组件根元素） - 子组件内部样式必须显式读取：
color: var(--text-color, #666);，不能只靠继承而不调用var() - 避免子组件样式中出现
all: initial或all: unset，这会切断继承链 - 若子组件用了 Shadow DOM（如某些 Web Component 封装），CSS 变量无法穿透，需通过
:host或属性透传
:style 和 :class 哪种更适合主题切换
不是非此即彼，而是分工明确：
-
:style适合微调数值型属性：主色明度、圆角大小、透明度、字体缩放比例等实时变化的参数 -
:class更适合整套主题切换：比如is-dark类批量启用暗色模式下所有预设规则，结构更清晰、DevTools 更易调试 - 推荐混合使用：用
:class控制大框架（theme-dark），再用:style或<style module>微调其中几个关键变量（如--accent-hue）
