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
。
阅读 287 · 发布于 2022-12-25
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
算法每日一题20190619:两数之和阅读 2022
-
MySQL 索引失效的几种场景阅读 713
-
MySQL 全文检索 FULLTEXT 搜索不到内容阅读 2795
-
走进 Rust:trait阅读 2235
-
Android SharedPreferences 工具类阅读 3377
-
算法每日一题20190623:最长公共前缀阅读 2383
-
Linux Vim 取消粘贴时自动注释和自动缩进阅读 3649
-
Android 使用 adb wm 命令调整手机分辨率阅读 24941
-
npm Windows 平台 install 报错阅读 6848
-
Docker 容器没有 ps pidof 查看进程命令解决办法阅读 599