36 scoped(局部)样式
scoped是在脚手架有一个编写样式的小技巧
作用:让样式在局部生效,防止冲突
36.1 编写案例
现在有两个组件,一个student,一个school,现在想给组件写点样式
这里只给个背景色
没问题,样式生效
36.2 样式冲突
在组件中写的样式,最后会汇总到一起,哪怕写了100个组件,这100的组件的样式也都是汇总到一起的,这样可能就会出现问题,比如类名冲突,下面我就演示一下
注意看,我这里有两个组件,组件的样式都叫test,但是样式不同,然后我让这两个组件的class相同
发现出现了样式冲突,哪个组件先被引入,就会被后者给替换掉,也就是后者代替前者的样式
传统解决办法
如果想避免冲突,传统的解决办法是让样式名称不同,但是有点不现实
vue解决办法
vue给我们提供了解决办法,可以使用scoped属性,表示当前这个样式只适用于当前的组件
36.3 特别注意:APP组件
scoped虽然好用,但是也不是适用于全部组件的,有一个人就比较特殊,那就是App
因为App是全部组件之父,一般在App里面写的样式,都是组件可以复用的,这时候给App组件声明scoped就不合适了
所以App组件一般不使用scoped,如果有的样式是App里面独有的,那么是可以使用的
36.4 总结
scoped样式
作用:让样式在局部生效,防止冲突
写法:<style scoped>