Vue 样式穿透（深度选择器）::v-deep
在 Vue 中，当使用 scoped 样式时，组件的样式默认不会影响到子组件。样式穿透（也称为深度选择器）是一种让父组件样式能够影响子组件样式的方法。
1. 为什么需要样式穿透？
在 Vue 单文件组件中，使用 scoped 属性可以限制样式只作用于当前组件：
<style scoped>
.button {color: red;
}
</style>这种样式不会影响到子组件中的元素。但有时我们需要修改子组件（如第三方组件）的样式，这时就需要样式穿透。
2. Vue 2 中的样式穿透方法
2.1 使用 >>> 操作符（Sass 不支持）
<style scoped>
.parent >>> .child {color: red;
}
</style>2.2 使用 /deep/ 或 ::v-deep（推荐）
<style scoped>
.parent /deep/ .child {color: red;
}/* 或者 */
.parent ::v-deep .child {color: red;
}
</style>3. Vue 3 中的样式穿透
Vue 3 中废弃了 >>> 和 /deep/，统一使用 ::v-deep：
<style scoped>
.parent ::v-deep .child {color: red;
}
</style>也可以简写为：
<style scoped>
:deep(.child) {color: red;
}
</style>5. 最佳实践
-
尽量少用样式穿透 - 优先考虑通过 props 或插槽来自定义子组件样式
-
使用更具体的选择器 - 避免样式污染
-
谨慎使用
!important- 可能导致样式难以维护
6. 不同预处理器中的写法
| 预处理器 | 写法 |
|---|---|
| 纯 CSS | ::v-deep |
| Sass/SCSS | ::v-deep 或 :deep() |
| Less | /deep/ 或 ::v-deep |
总结
Vue 的样式穿透主要用于修改子组件样式，在 Vue 2 中可以使用 /deep/ 或 ::v-deep，在 Vue 3 中推荐使用 ::v-deep 或 :deep()。使用时应当谨慎，避免过度使用导致样式难以维护。