Vue 父组件中修改子组件样式
Vue 大约 370 字scoped
style
中增加了scoped
属性,则样式只会在当前组件中生效。
deep
父组件的style
中定义/deep/
(Vue3
中会报错)或::v-deep
。
<style scoped>
/deep/ h3 {
color: red;
}
::v-deep h3 {
color: red;
}
</style>
原理
增加了scoped
的样式在Chrome
中查看可以看到增加了类似[data-v-001]
后缀。
h3[data-v-001] {
color: red;
}
/deep/
或::v-deep
会转变为:
[data-v-001] h3 {
color: red;
}
使用场景
使用第三方组件库时,需要修改第三方组件库中的样式,可以用到/deep/
或::v-deep
。
阅读 109 · 发布于 2022-12-25
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Vue mixins 复用组件功能阅读 73
-
为什么 Redis 的 hash slot 设置为 16384阅读 1945
-
Android 给按钮添加水波纹效果阅读 3831
-
IDEA Debug 时断点提示 No executable code found at line 434 in class阅读 2670
-
Java FutureTask 源码解析阅读 1602
-
JavaScript 删除数组中指定元素阅读 51
-
JavaScript 打开页面三种方式阅读 2316
-
Docker 部署 OpenResty阅读 1563
-
Kubernetes Pod 控制器 Job阅读 563
-
Linux 命令之查看进程启动时间阅读 2051