scoped的作用?

当style标签拥有scoped属性时,它的CSS样式就只作用于当前的组件。也就是说,scoped可以使得组件之间的样式互相隔离,互不影响。如果一个项目中的所有style标签全部加上了scoped,就相当于实现了样式的模块化。

【原理】添加scoped编译后,会给组件内所有标签元素添加一个唯一标识,这个唯一标识就是自定义属性data-v-xxxxxx(8个随机数)这样的字眼,同时,对应的样式选择器也会添加上这个唯一的属性选择器,由于每个组件的标识都是唯一的,意味着不会有重复的属性选择器出现,所以能够实现组件间的样式隔离。

对于data-v-xxxxxx这个唯一标识,可以运行一个vue项目,f12后元素检索就能看到每个元素都带了一个这样的标识。

发表评论