关于Vue3中的:deep

在 Vue 3 中，:deep()是一个用于 Scoped CSS 的伪类选择器，它的作用是穿透组件样式作用域，允许父组件修改子组件内部的样式。以下是详细解释：

为什么需要 :deep()？
Scoped CSS 的限制
Vue 的 <style scoped> 会为组件内的样式自动添加唯一属性选择器（如 [data-v-xxxxxx]），确保样式仅作用于当前组件。但如果你需要修改子组件（或其他深层嵌套元素）的样式，默认情况下这些样式会被隔离，无法生效。

穿透样式作用域
:deep() 允许你绕过 Scoped CSS 的限制，精确命中子组件的元素，同时保留父组件样式的作用域。

基本用法

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<style scoped>
/* 直接写子组件的类名无效（默认被 Scoped 隔离） */
.parent .child-class { 
  color: red; /* ❌ 不生效 */
}

/* 使用 :deep() 包裹子组件选择器 */
.parent :deep(.child-class) {
  color: red; /* ✅ 生效 */
}
</style>

编译后的效果
Vue 会将 :deep() 编译为正确的选择器格式。例如：

/* 原始代码 */
.parent :deep(.child-class) { color: red; }

/* 编译后 */
.parent[data-v-xxxxxx] .child-class { color: red; }

对比 Vue 2 的语法

• Vue 2 使用 >>>、/deep/ 或 ::v-deep 实现相同功能：

/* Vue 2 写法 */
.parent >>> .child-class { color: red; }
.parent /deep/ .child-class { color: red; }
.parent ::v-deep .child-class { color: red; }

• Vue 3 统一为:deep()，语法更符合 CSS 规范。