::v-deep 或 :deep() 在 CSS 中的含义

在 CSS 中，::v-deep（或其函数形式 :deep()) 是 Vue.js 特有的一个深度选择器。

它的主要作用是穿透组件的样式封装（scoped CSS）。

为什么需要深度选择器？

在 Vue.js 单文件组件（SFC）中，当你给 <style> 标签添加 scoped 属性时，Vue 会自动为组件的每个元素添加一个唯一的属性选择器（例如 data-v-xxxxxx）。这样做的目的是将组件的样式限制在组件内部，避免样式污染到其他组件，实现组件的样式隔离。

然而，这种样式隔离在某些情况下会带来不便。例如：

1. 修改第三方组件的样式： 如果你在一个 Vue 组件中使用了第三方 UI 组件库（如 Element UI、Ant Design Vue 等），这些组件通常会有自己的内部结构和样式。由于你的组件样式是 scoped 的，你无法直接通过普通的 CSS 选择器修改第三方组件内部元素的样式。
2. 修改子组件内部元素的样式： 有时候你需要在父组件中对子组件的某个特定元素进行样式调整，但子组件本身也是 scoped 的。

在这种情况下，就需要深度选择器来“穿透”这种样式封装。

::v-deep 和 :deep() 的用法

::v-deep (旧语法)

这是 Vue 2.x 中常用的语法，但现在已经被弃用，不推荐在新项目中使用。

html
<style scoped>
.parent-class ::v-deep .child-class {
  color: red;
}
</style>

:deep() (推荐语法)

这是 Vue 3.x 及更高版本推荐的语法，也是更符合 CSS 规范的函数式写法。

html
<style scoped>
.parent-class :deep(.child-class) {
  color: red;
}
</style>

工作原理：

当你使用 :deep() 时，它会告诉 Vue 编译器：child-class 这个选择器应该被解析为全局的，不受 scoped 属性的限制。Vue 会将你的深度选择器转换为不带 data-v-xxxxxx 属性的普通选择器，从而能够匹配到被封装的元素。

示例：

假设你有一个父组件 Parent.vue 和一个子组件 Child.vue。

Child.vue:

html
<template>
  <div class="child-container">
    <p class="child-text">我是子组件的文本</p>
  </div>
</template>

<style scoped>
.child-container {
  border: 1px solid blue;
  padding: 10px;
}
.child-text {
  color: blue;
}
</style>

Parent.vue:

html
<template>
  <div class="parent-container">
    <ChildComponent />
  </div>
</template>

<script setup>
import ChildComponent from './Child.vue';
</script>

<style scoped>
.parent-container {
  margin-top: 20px;
}

/* 尝试修改子组件的文本颜色 */
.parent-container :deep(.child-text) {
  color: green; /* 这会生效 */
  font-weight: bold;
}

/* 如果不使用 :deep() 则不会生效 */
/* .parent-container .child-text {
  color: purple;
} */
</style>

在这个例子中，Parent.vue 使用 :deep(.child-text) 成功地将 ChildComponent 内部的 .child-text 元素的颜色改为了绿色并加粗，即使 Child.vue 的样式是 scoped 的。

替代方案和注意事项

虽然 ::v-deep 或 :deep() 很有用，但过度使用它们可能会导致样式难以维护，因为它打破了组件的封装性。在某些情况下，可以考虑以下替代方案：

• 使用 CSS 变量： 在子组件中定义 CSS 变量，父组件通过 prop 传递变量值来修改样式。
• 提供 prop 或 slot： 如果是自定义子组件，可以为子组件提供 prop 或 slot 来控制其内部样式或内容。
• 不使用 scoped 样式： 对于某些全局的或需要被其他组件覆盖的样式，可以考虑不使用 scoped，而是将其定义为全局样式。

总结

::v-deep 和 :deep() 是 Vue.js 中用于穿透 scoped 样式封装的深度选择器。它们允许你从父组件修改子组件或第三方组件的内部样式。在使用时，推荐使用 :deep() 语法，并注意权衡其带来的便利性和样式维护的复杂性。