CSS变量在Vue的:style绑定中必须用字符串键名（如'--primary-color'），避免null/undefined导致失效；computed比data更适合动态生成变量对象，因其响应式更新；父组件可通过props或provide/inject向子组件传递变量值。
Style绑定里怎么写CSS变量
Vue的:style绑定支持对象和数组语法，但CSS变量（--xxx）不能直接当普通属性名用——因为破折号不是合法的JavaScript标识符。必须用字符串键名包裹，比如'--primary-color'，不能写成--primary-color（会报语法错误）。
常见错误是这样写：{ '--primary-color': '#42b883' }看似对，但如果变量值来自响应式数据且为null或undefined，Vue会跳过该样式，导致变量未生效，而不是设为空字符串。
- 用对象语法时，键名必须加单引号或双引号
- 值建议做非空校验，避免意外丢失变量定义
- 如果多个变量共存，推荐用数组语法合并本地样式和CSS变量
为什么computed比data更适合传CSS变量
CSS变量常需根据props、theme或用户设置动态计算，比如深色模式下切换--bg值。放在data里无法响应式更新；而computed能自动追踪依赖并重算，且不会在初始渲染前产生undefined。
例如：props.theme === 'dark'时返回{ '--bg': '#121212', '--text': '#ffffff' }，否则返回浅色值。若用data初始化后没手动同步更新，变量就会“卡住”。
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
computed返回的对象可直接用于:style - 避免在
mounted中手动赋值，容易遗漏响应式场景 - 注意不要在
computed里调用可能抛错的函数，否则整个:style会失效
父组件传CSS变量到子组件的有效方式
Vue中CSS变量本身不跨组件作用域，:style绑定只影响当前元素及其后代（除非子组件显式继承）。想让子组件“感知”父级定义的变量，有两条路：
- 父组件把变量值通过
props传下去，子组件再用:style注入到根元素（如<div :style="vars">） - 父组件在自身根元素上定义变量，并确保子组件样式用
var(--xxx)读取（依赖CSS继承或选择器穿透） - 不要试图在子组件
:style里写{ '--parent-var': $parent.xxx }——$parent访问不响应，且破坏封装
更稳妥的做法是：父组件通过provide/inject传一个变量生成函数，子组件调用它获取最新值，再绑定到:style。
浏览器兼容性和scoped样式里的坑
CSS变量IE全系不支持，Vue项目若需兼容IE，必须降级方案（如用class切换主题+预设样式表）。另外，<style scoped>下:style绑定的变量仍生效，但要注意：scoped会为元素加属性选择器（如data-v-f3f3eg9），而CSS变量定义在:root或父级时，只要选择器能匹配到目标元素，变量就能被读取。
-
scoped不影响:style内联变量的生效，但会影响你用var(--x)的地方是否能取到值 - 避免在scoped样式里写
background: var(--bg, #fff);却没在任何地方定义--bg—— fallback会生效，但变量意图就丢了 - 调试时用DevTools的Computed面板看
element.style里有没有出现--xxx行，没有就说明绑定失败或值为空
真正容易被忽略的是：CSS变量值如果是空字符串''，浏览器会当作无效声明丢弃，而不是继承或fallback；所以宁可传'initial'或明确的默认色，也别留空。
