Vue3.x的深度选择器详细解读

在 Vue 3 中，深度选择器（Deep Selector）用于在 <style scoped> 中穿透作用域样式，影响子组件的样式。Vue 3 中深度选择器的语法与 Vue 2 有所不同，以下是详细说明：

1. 深度选择器的作用

在 Vue 的单文件组件中，<style scoped> 会将样式限制在当前组件内，避免样式污染。但有时需要修改子组件的样式，这时就需要使用深度选择器。

2. Vue 3 中的深度选择器语法

Vue 3 中，深度选择器的语法有以下几种：

(1) ::v-deep

这是 Vue 3 推荐的标准语法。

示例：

<style scoped> .parent ::v-deep .child { color: red; } </style> (2) >>>（已弃用）

在 Vue 2 中常用，但在 Vue 3 中已弃用。

示例：

<style scoped> .parent >>> .child { color: red; } </style> (3) /deep/（已弃用）

在 Vue 2 中也可以使用，但在 Vue 3 中已弃用。

示例：

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

这是 Vue 3 中新增的语法，功能与 ::v-deep 相同。

示例：

<style scoped> .parent :deep(.child) { color: red; } </style> 3. 使用场景

深度选择器通常用于以下场景：

修改第三方组件的样式。

在父组件中修改子组件的样式。

4. 示例 父组件（Parent.vue） <template> <div class="parent"> <Child /> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, }; </script> <style scoped> .parent ::v-deep .child { color: red; } </style> 子组件（Child.vue） <template> <div class="child"> 这是子组件 </div> </template> <style scoped> .child { font-size: 16px; } </style> 结果

子组件中的 .child 文字会变为红色，因为父组件通过深度选择器修改了子组件的样式。

5. 注意事项

慎用深度选择器：过度使用深度选择器可能导致样式难以维护，建议优先通过子组件暴露的 props 或插槽实现样式定制。

兼容性：>>> 和 /deep/ 在 Vue 3 中已弃用，建议使用 ::v-deep 或 :deep()。

总结

Vue 3 中推荐使用 ::v-deep 或 :deep() 作为深度选择器。

深度选择器用于穿透作用域样式，影响子组件的样式。

尽量避免过度使用深度选择器，以保持代码的可维护性。