vue 3 中可在 中用 v-bind() 直接绑定响应式变量，编译后转为 css 变量并注入根元素；仅限 sfc 的 块，不支持嵌套访问或 js 表达式，作用域限于当前组件及其后代，子组件需显式用 var(--x) 读取。
直接用 v-bind() 在 <style></style> 块里引用响应式变量，比手动拼内联 :style 更干净、更易维护，且天然支持 scoped 隔离。
在
Vue 3 SFC 支持在 <style scoped></style> 里直接写 color: v-bind(textColor) 这类语法，编译后自动转成 color: var(--textColor) 并注入根元素的 style 属性。
-
v-bind()只能出现在<style></style>块中，不能用于 JS 逻辑或模板里的字符串拼接 - 括号内必须是响应式变量名（
ref、computed或setup中的解构变量），不能带引号或表达式，比如v-bind(textColor + 'ff')❌ 不合法 - 如果变量是对象属性，需先解构或用计算属性暴露，
v-bind(theme.colors.primary)❌ 不支持嵌套访问 - 值为
null或undefined时，CSS 会 fallback 到后续声明或初始值，不会报错但可能样式异常
为什么 v-bind() 设置的变量在子组件里读不到
因为 v-bind() 注入的 CSS 变量默认只作用于当前组件根元素及其普通后代；一旦遇到 shadow DOM、all: initial、或未显式调用 var(--x)，就会中断。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章