vue实现样式隔离

Vue 样式隔离的实现方法

Vue 提供了多种方式实现组件级别的样式隔离，避免全局样式污染。以下是常见方法：

Scoped CSS

在单文件组件（SFC）的 <style> 标签中添加 scoped 属性，Vue 会自动为当前组件的样式添加唯一属性选择器：

<style scoped>
.button {
  color: red;
}
</style>

编译后会被转换为类似：

.button[data-v-f3f3eg9] {
  color: red;
}

CSS Modules

通过配置 vue-loader 启用 CSS Modules，在 <style module> 中生成局部类名：

<template>
  <button :class="$style.button">Click</button>
</template>

<style module>
.button {
  background: blue;
}
</style>

深度选择器

需要穿透 scoped 样式影响子组件时，使用 ::v-deep（或 /deep/、>>>）：

<style scoped>
::v-deep .child-component {
  padding: 10px;
}
</style>

动态类名绑定

结合 Vue 的响应式特性动态控制类名：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

命名约定

采用 BEM 等命名规范手动隔离样式：

.my-component__button--disabled {
  opacity: 0.5;
}

注意事项

• Scoped CSS 不影响全局样式表
• 使用预处理器时（如 Sass），scoped 同样有效
• 深度选择器在 Vue 3 中推荐使用 :deep() 替代 ::v-deep
• CSS Modules 需要通过 $style 对象访问类名