阅读 977

「vue style」 scoped原理,嵌套情况,v-deep原理

style

“写vue项目时,style标签应当加scoped,防止样式污染”

这句话,新人在进入vue时,都应该知道这个指导。用了scoped之后,就开始发现,当组件的样式需要调整时就麻烦了,直接写组件样式在scoped里完全不起效果,在vue-admin-template中,发现它是单开一个不带scoped的style标签去影响内部组件。

但是又出现一种情况,不用scoped就可能发生style泄露(可以有意防止,但需要注意),且有时确实只需要改动样式很小时,专门新开一个style就显得不便了。这个时候就用上深度作用选择器

vue-loader.vuejs.org/zh/guide/sc…

sass不能正确解析>>>dart-sass又无法解析/deep/issue),那就只剩下::v-deep了。

那::v-deep怎么正确使用呢?那就需要明白使用scoped发生了,::v-deep又改变了什么。

加上scoped发生了什么

这是加scoped后的编译

scoped (2).png

可以看到,所有样式尾部都加上了[data-v-xxxx] ,相应的vue文件中<template>内所有标签都加上相同的[data-v-xxxx],而子组件div.si-select-content却不会加上[data-v-xxxx]属性

image.png

这样,所有样式目标都指向了当前页面(组件),就实现了完全的样式封闭

::v-deep改变了什么

::v-deep将要改变的组件样式包裹

image.png

结果样式的[data-v-xxxx]就放在了::v-deep的上层选择器

image.png

把::v-deep当作伪元素更方便一点,如下

v-deep.png

(这里可以看到相邻兄弟选择器 A + B出现了解析不正常,使用时要注意)

如果把::v-deep放在.component-body后面,[data-v-xxxx]就会跑到该选择器后面

v-deep2.png

这样也放大了样式的污染范围,所以要注意。

文章分类
前端
文章标签