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

BillKu

已于 2025-06-16 21:00:51 修改

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-06-16 21:00:31 首次发布

本文链接：https://blog.csdn.net/BillKu/article/details/148700446

在 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() 语法

关键区别总结：

特性	`:deep(selector)`（有括号）	`:deep selector`（无括号）
语法正确性	✅ Vue 3.3+ 官方推荐	⚠️ 已被废弃（兼容旧项目）
编译结果	相同（`[data-v-xxx] selector`）	相同（但会触发警告）
未来兼容性	安全	可能在未来版本失效
代码规范	符合 CSS 伪类标准（如 `:not()`）	不符合标准伪类写法

正确用法示例：

vue

复制

下载

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

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