2.12 vue中css scoped的原理

html-css020

2.12 vue中css scoped的原理,第1张

1.在组件中增加的css加了scoped属性之后,就在会在当前这个组件的节点上增加一个 data-v-xxx属性。

2.此组件的所用的css,都会被设置为属性选择器例如下:

3.通过css的属性选择器从而解决了多个组件重复的class,会导致冲突的问题

Scope属性定义了行的表头和列的表头:col: 列表头 row: 行表头在第一行的加上值为col的scope属性,声明他们是下面(列)数据单元格的表头。同样的,给每行的开头加上值为row的scope属性声明他们是右边(行)数据单元格的表头。Scope属性还有两个值:colgroup: 定义列组(column group)的表头信息 rowgroup: 定义行组(row group)的表头信息

实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模

块虽然方便但是我们需要慎用,因为当我们使用公共组件时会造成很多困难,

增加难度,想知道造成那些难度,需要先从scoped实现原理了解

通过观察DOM结构可以发现:vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用,如图,样式属性上也会多一个该字符,以保证唯一

可以看出加上 scoped 后的组件里的标签都会多一个 data-v-469af010 的属性,并且在css样式部分可以看出

由此可知,添加 scoped 属性的组件,为了达到不污染全局,做了如下处理:

其实从原理已经能够了解到慎用原因,这里权当总结