Vue中Css的scoped的原理

当style标签拥有scoped属性的时候,它的css样式只会作用在当前组件

也就是说scoped可以使得组件之间的样式互相隔离,互不影响

如果一个项目中的左右组件style标签都加上scoped就相当于实现了样式模块化

原理:

添加scoped标签后会给组件中所有标签元素,添加一个唯一标识,这个唯一标识就是自定义属性,data-v-xxxxxxxx这样的字眼,同时对应的样式选择器也会添加这个唯一的属性选择器,由于每个组件的表示都是唯一的,也就意味着不会有重复的原则其出现,所以可以实现组件间的样式隔离,对于data-v-xxxxxx这个唯一标识
就是在检索的时候就能发现每一个标签上都有这个属性

你可能感兴趣的:(vue,vue.js,css,前端)