Vue.js 中通过 slots 与 CSS 变量配合实现结构与样式分离：slots 提供内容灵活性（默认、具名、作用域插槽），CSS 变量承接主题配置（语义化命名、默认回退值），组合使用可复用组件并自由定制外观，无需修改源码或添加 scoped class。
Vue.js 中通过 slots 与 CSS 自定义属性（CSS 变量）配合，能真正实现“结构与样式分离”，让组件既可复用又可自由定制外观，而无需修改组件源码或写一堆 scoped class。
Slots 提供内容灵活性，避免样式侵入
使用具名插槽或作用域插槽，把内容渲染权交给父组件，组件内部只保留语义化结构（如 <button></button>、<card></card>），不绑定具体 class 或内联样式。这样，同一组件在不同页面可呈现完全不同的视觉风格。
- 默认插槽用于主体内容，比如按钮文字或卡片正文
- 具名插槽控制固定区域，如
header、footer，方便统一布局但样式独立 - 作用域插槽传递数据（如 item、status），让父组件决定如何渲染及加什么类名
CSS 变量承接主题配置，动态响应设计系统
在组件根元素上定义一套语义化 CSS 变量（如 --card-bg、--btn-padding、--text-primary），所有内部样式都基于这些变量计算。父组件只需在使用时通过 style 绑定覆盖变量值，即可全局调整该实例的视觉表现。
- 变量命名推荐前缀 + 语义，如
--my-button-bg避免冲突 - 在组件
<style></style>中用var(--my-button-bg, #007bff)设置默认回退值 - 父组件中：
<mybutton :style="{ '--my-button-bg': '#ff6b6b', '--my-button-radius': '8px' }"></mybutton>
组合使用：一个可换肤的 Card 组件示例
Card 不写任何具体颜色或圆角，只定义结构和变量接口：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
<template>
<article class="card">
<header class="card__header"><slot name="header"></slot></header>
<main class="card__body"><slot></slot></main>
<footer class="card__footer"><slot name="footer"></slot></footer>
</article>
</template>
<style scoped>
.card {
background-color: var(--card-bg, #fff);
border-radius: var(--card-radius, 12px);
box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.08));
padding: var(--card-padding, 1rem);
}
.card__header { color: var(--card-header-color, #333); }
.card__body { line-height: var(--card-line-height, 1.6); }
</style>
调用时直接注入主题变量，无需额外 class 或深度选择器：
<MyCard
:style="{
'--card-bg': '#f8f9fa',
'--card-radius': '4px',
'--card-shadow': 'none'
}"
>
<template #header><h3>轻量模式</h3></template>
<p>这是简洁风格的内容</p>
</MyCard>
进阶技巧：配合 provide/inject 实现跨层级主题透传
当多个嵌套子组件都需要读取同一套主题变量时，可在顶层布局组件中 provide 一个响应式主题对象，子组件用 inject 获取，并通过 :style 动态绑定到各元素上。这样既保持 slots 的内容开放性，又让 CSS 变量具备响应能力和继承性。
- 主题对象可包含深色模式开关、字号比例、动效开关等维度
- 结合
computed动态生成变量值，比如根据theme.mode === 'dark'返回不同色值 - 避免在子组件中硬编码变量名，可用
const themeVars = computed(() => ({ ... }))封装逻辑
这种模式不依赖第三方库，原生 Vue + 原生 CSS 就能落地，适合中大型项目构建可维护的设计系统。
