scoped用法

在vue中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。但是为什么要慎用呢?在实际业务中我们往往会对公共组件样式做细微的调整,如果添加了scoped属性,那么样式将会变得不易修改。scoped肯定是解决了样式私有化的问题,但同时也引入了新的问题—样式不易(可)修改,而很多时候,我们是需要对公共组件的样式做微调的。

scoped实现私有化样式的原理

vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的

大家都知道css样式有一个优先级的说法,scoped的这一操作,虽然达到了组件样式模块化的目的,但是会造成一种后果:每个样式的权重加重了:理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度。

总结一下scoped三条渲染规则

1.给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性

2.在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式

3.如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性

解决方案

1.对于引用的三方库,如果对方使用了scoped,我们无力改变什么,如果确实需要修改他的样式最能在不加scoped的组件中修改样式,或者全局样式直接修改,这很粗暴!
对于自己维护的组件,一定要想清楚,组件的样式能否满足所有的情况。如果确实需要加,无疑会增加使用这个组件的开发同学的工作!
2.或者增加class类名,针对不同的类名加不同的样式

当然对于这个问题,如果诸君有更好的解决方案,请诸君TELL ME一下下!

链接: https://blog.csdn.net/aa19891204/article/details/81256645?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-1&spm=1001.2101.3001.4242.

猜你喜欢

转载自blog.csdn.net/MISS_zhang_0110/article/details/120487384