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

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

为什么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 前端开发 样式管理

推荐文章

程序员出海搞钱工具库
2024-11-18 22:16:19 +0800 CST
Elasticsearch 的索引操作
2024-11-19 03:41:41 +0800 CST
浏览器自动播放策略
2024-11-19 08:54:41 +0800 CST
CSS 奇技淫巧
2024-11-19 08:34:21 +0800 CST
html5在客户端存储数据
2024-11-17 05:02:17 +0800 CST
如何实现虚拟滚动
2024-11-18 20:50:47 +0800 CST
Nginx 反向代理
2024-11-19 08:02:10 +0800 CST
CSS 特效与资源推荐
2024-11-19 00:43:31 +0800 CST
Vue3 实现页面上下滑动方案
2025-06-28 17:07:57 +0800 CST
html夫妻约定
2024-11-19 01:24:21 +0800 CST
php机器学习神经网络库
2024-11-19 09:03:47 +0800 CST
Nginx 实操指南:从入门到精通
2024-11-19 04:16:19 +0800 CST
程序员茄子在线接单