Vue单文件组件复用：如何无需复制粘贴定制CSS样式？

兄弟，完全不用复制粘贴组件这种冗余操作！Vue提供了好几种优雅的方式来复用组件同时定制样式，我给你分享几个日常开发里常用的方案：

1. 通过Props传递样式参数（最推荐的轻量方案） #

如果只是改背景色、字体大小这种简单样式，直接给原组件加个样式相关的Props就搞定，不用动原组件的核心代码，还能保持复用性。

原组件（MyBaseComponent.vue） #

<template>
  <div class="base-component" :style="{ backgroundColor: bgColor, color: textColor }">
    <!-- 组件原有内容 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: '#ffffff' // 默认背景色
    },
    textColor: {
      type: String,
      default: '#333333' // 默认文字颜色
    }
  }
}
</script>

<style scoped>
.base-component {
  /* 原有基础样式 */
  padding: 16px;
  border-radius: 4px;
}
</style>

新组件（NewStyledComponent.vue） #

<template>
  <MyBaseComponent bgColor="#f5f5f5" textColor="#666666">
    <!-- 这里可以放新组件的自定义内容 -->
  </MyBaseComponent>
</template>

<script>
import MyBaseComponent from './MyBaseComponent.vue'

export default {
  components: {
    MyBaseComponent
  }
}
</script>

2. 用作用域样式穿透覆盖样式（不用改原组件） #

如果原组件已经写死了样式，又不想动它的代码，就用Vue的作用域穿透功能，直接在新组件里覆盖目标样式。

新组件（NewStyledComponent.vue） #

<template>
  <MyBaseComponent></MyBaseComponent>
</template>

<script>
import MyBaseComponent from './MyBaseComponent.vue'

export default {
  components: {
    MyBaseComponent
  }
}
</script>

<style scoped>
/* Vue2 写法 */
::v-deep .base-component {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
}

/* Vue3 更规范的写法 */
:deep(.base-component) {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
}
</style>

3. 继承原组件创建新组件（适合多样式/逻辑调整） #

如果需要修改的样式较多，甚至要加一点新逻辑，直接继承原组件是个高效的办法，既能复用原组件的所有功能，又能自由扩展。

新组件（NewStyledComponent.vue） #

<template>
  <!-- 可以复用原组件的模板，也可以重写部分内容 -->
  <div class="custom-component">
    <h2>我是新组件的自定义标题</h2>
    <!-- 复用原组件的内容 -->
    <slot></slot>
  </div>
</template>

<script>
import MyBaseComponent from './MyBaseComponent.vue'

export default {
  extends: MyBaseComponent,
  // 这里可以添加新的Props、Methods，甚至覆盖原组件的逻辑
  data() {
    return {
      // 新增数据
    }
  }
}
</script>

<style scoped>
.custom-component {
  background-color: #f5f5f5;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /* 其他自定义样式 */
}
</style>

4. 传递自定义类名+插槽（灵活度拉满） #

如果原组件预留了自定义类名的入口，或者有插槽，那组合起来用会非常灵活，完全不限制样式修改的范围。

原组件（MyBaseComponent.vue） #

<template>
  <div :class="['base-component', customClass]">
    <!-- 插槽用于自定义内容 -->
    <slot name="header"></slot>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    customClass: {
      type: String,
      default: ''
    }
  }
}
</script>

新组件（NewStyledComponent.vue） #

<template>
  <MyBaseComponent customClass="my-custom-style">
    <template #header>
      <h3>自定义头部</h3>
    </template>
    我是新组件的内容
  </MyBaseComponent>
</template>

<script>
import MyBaseComponent from './MyBaseComponent.vue'

export default {
  components: {
    MyBaseComponent
  }
}
</script>

<style scoped>
.my-custom-style {
  background-color: #f5f5f5;
}
.my-custom-style .content {
  font-size: 14px;
  color: #666;
}
</style>

总结一下选方案的思路：

• 小改动（比如改个颜色）：用Props传递样式或者::v-deep穿透最快
• 需要较多样式/逻辑调整：用组件继承
• 想要最大灵活度：自定义类名+插槽组合

绝对比复制粘贴组件要优雅太多，还能保持代码的可维护性！

内容的提问来源于stack exchange，提问作者ptk