vue 3 中用 :style 绑定 css 变量最稳妥的方式是对象语法 :style="{ '--var-name': value }，变量名须带 -- 前缀，值自动转字符串；子组件不生效主因是继承中断（如 all: initial、shadow dom 或未用 var() 读取）。
直接用 :style 绑定对象，键名带 -- 前缀，值自动转字符串——这是最稳妥、兼容性最好、也最不容易出错的方式。
用 :style 绑定内联 CSS 变量（推荐）
Vue 3 的 :style 指令原生支持将响应式数据映射为内联 CSS 自定义属性，语法简洁且不依赖编译时处理。
- 必须写成对象语法：
:style="{ '--color': colorValue }"，不能写成字符串拼接或模板插值（如style="--color: {{ colorValue }}"会报错或被忽略） -
colorValue是ref或computed都可以，Vue 会自动取其.value并转为字符串（0.7→"0.7"，20→"20"） - 变量名必须以
--开头，否则浏览器不识别为 CSS 自定义属性，也不会生效 - 该方式在所有 Vue 3 版本（包括 3.0+）都可用，不依赖
script setup语法糖，也不要求 3.2+
示例：
<template><div :style="{ '--bg-hue': hue, '--text-opacity': opacity }">
内容
</div>
</template><p><script setup>
import { ref } from 'vue'
const hue = ref(210)
const opacity = ref(0.85)
</script></p>
在 <style></style> 中用 v-bind()（仅限 Vue 3.2+）
这是编译时能力，把 JS 变量“注入”到组件的 <style></style> 块中，生成真正的 CSS 自定义属性。但它只在 <style></style>（含 scoped）里有效，不能用于内联样式或外部 CSS。
- 变量必须是
ref或computed，且在script setup中声明并暴露（无需.value，直接写v-bind(color)） - 不支持带单位的动态计算，比如
font-size: v-bind(fontSize)px会报错；需改用calc(v-bind(fontSize) * 1px) - 如果变量是数字（如
ref(16)），v-bind(fontSize)输出的是纯数字，CSS 中需显式加单位（font-size: calc(v-bind(fontSize) * 1px)） - 该写法无法在
style外部（如子组件或全局样式）读取，作用域严格限制在当前组件的<style></style>块内
示例：
<script setup>
import { ref } from 'vue'
const color = ref('#42b883')
const fontSize = ref(16)
</script><p><style scoped>
.text {
color: v-bind(color);
font-size: calc(v-bind(fontSize) * 1px);
}
</style></p>
为什么子组件拿不到父组件设置的 --xxx？
不是绑定方式错了，而是 CSS 变量的继承机制被中断了。父组件用 :style 设置的 --xxx 默认只作用于自身及其普通后代，但某些情况会切断链路。
- 子组件根元素用了
all: initial或all: unset—— 这会重置所有继承属性，包括 CSS 变量 - 子组件是 Web Component（如部分 UI 库封装的组件），运行在 shadow DOM 中，默认不继承 light DOM 的自定义属性
- 子组件样式里没写
var(--xxx)显式读取，比如写了color: #333却没写color: var(--text-color, #333) - 父组件设在非容器节点上（比如设在
<span></span>上），而子组件挂载在别的 DOM 分支，压根不在其后代链中
容易被忽略的关键点
很多人卡在“明明绑了却没变色”，其实问题常出在三个地方：一是变量名漏了 --，二是子组件没用 var() 主动消费，三是用了 all: initial 却没意识到它连 CSS 变量一起清掉了。尤其是最后一点，在重置样式库（如 modern-normalize）或某些 UI 组件的根类里很常见，查起来特别隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
