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() 作为深度选择器。

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

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