编程 为什么vue:deep、/deep/、>>>样式能穿透到子组件

2024-11-19 05:20:55 +0800 CST views 827

为什么vue:deep、/deep/、>>>样式能穿透到子组件

在使用scoped标记的style时,deep符号通常用于修改外部组件的样式。下面我们将探讨这些符号的用法及其效果。

小试牛刀

不使用deep

如果要修改三方组件的样式,通常只能将样式放在scoped之外,这会导致全局样式污染,可能引发样式冲突。

<style lang="less">
.container {
    .el-button {
        background: #777; 
    }
}
</style>

使用 /deep/>>>(已弃用)

.container1 {
    /deep/ .el-button {
        background: #000; 
    }
}
.container2 >>> .el-button {
    background: #222; 
}

在 Vue 3 中使用 /deep/>>> 时,控制台会提示警告:这两个组合符号已被弃用,建议使用:deep()替代。

使用 :deep

.container3 {
    :deep(.el-button) {
        background: #444; 
    }
}

嵌套 :deep

如果按以下方式嵌套deep,是否有效呢?

.container4 {
    :deep(.el-button) {
        :deep(.el-icon) {
            color: #f00;
        }
    }
}

源码解析

/deep/>>>在编译时被转换为空格,从而使得选择器直接变为子样式。例如:

.no-deep .container1[data-v-f5dea59b] .el-button { background: #000; }

:deep的处理过程则更复杂,但最终会生成类似以下的样式:

.no-deep .container3[data-v-f5dea59b] .el-button { background: #444; }

嵌套结果

.container4 :deep(.el-button)为例,解析后可能得到:

  • 最终样式为 .container4 .el-button,而对于:deep(.el-icon),由于找不到祖先元素,结果为:
.no-deep .container4[data-v-f5dea59b] .el-button :deep(.el-icon) { color: #f00; }

这表明,deep并不支持嵌套。

结尾

如果觉得本文对你有帮助,欢迎关注我的开源项目,感谢你的支持!

复制全文 生成海报 Vue 前端开发 样式管理

推荐文章

Python中何时应该使用异常处理
2024-11-19 01:16:28 +0800 CST
10个几乎无人使用的罕见HTML标签
2024-11-18 21:44:46 +0800 CST
免费常用API接口分享
2024-11-19 09:25:07 +0800 CST
12个非常有用的JavaScript技巧
2024-11-19 05:36:14 +0800 CST
Nginx rewrite 的用法
2024-11-18 22:59:02 +0800 CST
Elasticsearch 条件查询
2024-11-19 06:50:24 +0800 CST
mysql 优化指南
2024-11-18 21:01:24 +0800 CST
Vue中如何处理异步更新DOM?
2024-11-18 22:38:53 +0800 CST
Python设计模式之工厂模式详解
2024-11-19 09:36:23 +0800 CST
Nginx 防盗链配置
2024-11-19 07:52:58 +0800 CST
html一个包含iPhoneX和MacBook模拟器
2024-11-19 08:03:47 +0800 CST
如何在 Vue 3 中使用 TypeScript?
2024-11-18 22:30:18 +0800 CST
什么是Vue实例(Vue Instance)?
2024-11-19 06:04:20 +0800 CST
MySQL 主从同步一致性详解
2024-11-19 02:49:19 +0800 CST
12 个精选 MCP 网站推荐
2025-06-10 13:26:28 +0800 CST
【SQL注入】关于GORM的SQL注入问题
2024-11-19 06:54:57 +0800 CST
Vue3 vue-office 插件实现 Word 预览
2024-11-19 02:19:34 +0800 CST
Vue3中如何处理组件的单元测试?
2024-11-18 15:00:45 +0800 CST
Python上下文管理器:with语句
2024-11-19 06:25:31 +0800 CST
Go 语言实现 API 限流的最佳实践
2024-11-19 01:51:21 +0800 CST
前端如何给页面添加水印
2024-11-19 07:12:56 +0800 CST
Boost.Asio: 一个美轮美奂的C++库
2024-11-18 23:09:42 +0800 CST
JavaScript 流程控制
2024-11-19 05:14:38 +0800 CST
程序员茄子在线接单