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. 最佳实践

1. 尽量少用样式穿透 - 优先考虑通过 props 或插槽来自定义子组件样式

2. 使用更具体的选择器 - 避免样式污染

3. 谨慎使用 !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()。使用时应当谨慎，避免过度使用导致样式难以维护。