Vue3中 :deep() 与 :deep 用法区别解析

在 Vue 3 的 Scoped CSS 中，:deep() 用于穿透样式作用域（样式穿透），其括号的使用有明确区别：

1. 有括号：:deep(selector)（推荐写法）

css

复制

下载

:deep(.child-class) { 
  color: red;
}

• ✅ 正确用法：将需要穿透的选择器放入括号内

• ✅ 编译后生成类似 [data-v-xxx] .child-class 的选择器

• ✅ Vue 3.3+ 官方推荐写法（无括号写法已被标记为废弃）

2. 无括号：:deep selector（废弃写法）

css

复制

下载

:deep .child-class { 
  color: red;
}

• ⚠️ 已被废弃（Vue 3.3+ 会警告）

• ❌ 编译后生成 [data-v-xxx] .child-class（效果相同但语法不标准）

• ❌ 未来版本可能被移除

3. ⚠️ 历史写法：::v-deep（Vue 2 兼容）

css

复制

下载

/* Vue 2 方式 (已废弃) */
::v-deep .el-dialog__body {
  padding: 15px;
}

• 在 Vue 3 中仍可用但已被标记为废弃

• 推荐迁移到 :deep() 语法

关键区别总结：

正确用法示例：

vue

复制

下载

<style scoped>
/* 穿透到子组件内的元素 */
.parent :deep(.child-element) {
  padding: 10px;
}

/* 穿透到插槽内容 */
:deep(slot-content) {
  background: yellow;
}
</style>

迁移建议：

• 新项目一律使用 :deep(selector)

• 旧项目升级 Vue 3.3+ 后，用 ESLint 的 vue/no-deprecated-deep-selector 规则自动替换无括号写法

💡 其他穿透语法：

• 插槽内容穿透 → :slotted(.slot-class)

• 全局样式 → :global(.global-class)