因为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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章