因为v-bind:style期望接收对象或数组，而非含双大括号的字符串；写成style="--color: {{ color }}"会被当静态属性处理，不进入响应式系统，也不解析为CSS变量。
为什么直接在 v-bind 里写 style="--color: {{ color }}" 不生效
Vue 模板中不能在双大括号插值里直接拼接 CSS 自定义属性（即 --xxx 变量）到 style 字符串里，因为 Vue 的 v-bind:style 期望的是一个对象或数组，而不是带插值的字符串。写成 style="--color: {{ color }}" 会被当作静态 HTML 属性处理，不进入响应式系统，也不会被解析为 CSS 变量。
正确做法是用 v-bind:style 绑定一个 JS 对象，把变量名作为键、变量值作为值传进去：
<div v-bind:style="{ '--bg-color': bgColor, '--text-size': textSize + 'px' }">
内容
</div>
-
--bg-color是合法的 CSS 变量名，可直接作为对象 key（需加引号，因含短横线） -
bgColor必须是响应式数据（ref或data中的属性），否则不会更新 - 单位如
px、rem需手动拼接，Vue 不会自动补全
如何让子组件继承并使用父组件传入的 CSS 变量
CSS 变量天然具有继承性，但前提是父元素设置了该变量，且子元素未被重写。在 Vue 中，若想让子组件“感知”父组件通过 v-bind:style 设置的变量，关键在于：父组件必须将变量设在**包裹子组件的外层容器上**，而不是直接写在子组件标签的 style 上（那会作用于子组件根元素，而非其内部）。
例如：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
<template>
<div :style="{ '--theme-color': theme }">
<child-component />
</div>
</template>
-
child-component根元素内样式可直接用color: var(--theme-color) - 如果
theme是ref，修改它会触发父容器重渲染，CSS 变量值实时更新，子组件样式随之响应 - 避免在子组件
<style scoped>中覆盖同名变量，否则会切断继承链
v-bind:style 与 :style 在 CSS 变量场景下有区别吗
没有本质区别。:style 是 v-bind:style 的简写，两者编译后完全等价。但要注意写法一致性：
- 用
:style时，值必须是合法 JS 表达式，比如:style="{ '--size': size + 'rem' }" - 不能写成
:style="'--size: ' + size + 'rem'"—— 这会生成字符串，Vue 不识别为 style 对象，浏览器也当普通属性忽略 - 若需合并多个 style 对象（如基础样式 + 动态变量），可用展开运算符：
:style="[baseStyle, { '--hover-bg': hoverBg }]"
动态切换主题时，CSS 变量 + v-bind:style 的性能要注意什么
频繁更新大量 CSS 变量（比如整套主题含 20+ 个 --xxx）并绑定到顶层容器，会导致所有后代元素重绘（repaint），但不会触发重排（reflow）。这比用 JS 直接改 class 或内联 color/background 更轻量，但仍需注意：
- 避免在
v-for列表每一项都独立绑定一整套变量，应提升到列表容器统一设置 - 不要在
computed中返回新对象（如return { '--x': a, '--y': b }），每次取值都会新建对象，触发无谓更新；改用ref或缓存对象引用 - 若变量只用于颜色/尺寸等简单场景，CSS 变量 +
v-bind:style是极简方案；但涉及复杂逻辑（如根据屏幕宽度切换断点变量），建议结合@media和:root定义，而非全靠 JS 绑定
真正容易被忽略的是：CSS 变量值本身不校验类型，--opacity: 'abc' 不报错但无效，调试时得靠 DevTools 的 computed 样式面板确认实际生效值。
