Vue---scoped,deep,CSS Modules

​

scoped

scoped是Vue组件标签中的一个特性,作用是限制CSS 只作用于当前组件，防止影响全局或其他组件。

作用原理

Vue 通过 自动添加属性选择器（如 data-v-xxxx）来作用于当前组件的元素，从而实现 CSS 作用域隔离。

<template>
  <div class="container">
    Scoped 样式示例
  </div>
</template>

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

编译后

<div class="container" data-v-abc123>Scoped 样式示例</div>
.container[data-v-abc123] {
  color: red;
}

deep

/deep/（或 ::v-deep）在 Vue 中用于穿透 scoped 样式 ，作用是让样式作用于子组件的深层次元素 ，即使它们位于 scoped 作用域内。

实际开发应用

• 修改第三方库(Element UI,Ant等)组件样式
• 直接作用子组件深层次的元素

使用方式

vue2(/deep/或者>>>)

<style scoped>
/deep/ .child-element {
  color: red;
}

/* 或者使用 >>>，它是 `/deep/` 的别名 */
>>> .child-element {
  color: red;
}
</style>

vue3(::v-deep() 或者:deep())

<style scoped>
::v-deep(.child-element) {
  color: red;
}
</style>
<style scoped>
:deep(.child-element) {
  color: red;
}
</style>

CSS Modules

优点

• 避免全局样式冲突：每个组件的样式都是局部的，不会影响其他组件。
• 支持动态绑定 ：可以用 :class 绑定动态样式。
• 适用于 Vue 组件化开发，特别是在大型项目中更容易管理。

基本使用

<template>
  <div :class="$style.title">Hello CSS Modules</div>
</template>

<style module>
.title {
  color: red;
  font-size: 20px;
}
</style>

作用原理

1.title类名会被自动转换成一个唯一的名称

.title___3ghj2 { color: red; font-size: 20px; }

2.组件中的 :class="$style.title" 会被转换成这个唯一类名

父组件传递 CSS Modules

父组件:

<template>
  <Child :styles="$style" />
</template>

<style module>
.parentTitle {
  font-size: 18px;
  color: green;
}
</style>

子组件

<template>
  <div :class="styles.parentTitle">我是子组件</div>
</template>

<script setup>
defineProps(["styles"]);
</script>

Vue 组件外部使用 CSS Modules

<script setup>
import styles from "./style.module.css";
</script>

<template>
  <div :class="styles.box">外部 CSS Modules</div>
</template>

style.module.css

.box {
  background-color: yellow;
  padding: 10px;
}

​