Vue-scoped(局部)样式

绝地灬酷狼 2023-10-12 19:06 44阅读 0赞

# scoped(局部)样式 #

scoped是在脚手架有一个编写样式的小技巧

作用：让样式在局部生效，防止冲突

## 1 编写案例 ##

现在有两个组件，一个student,一个school，现在想给组件写点样式

![1774bae0aae99255afeada3e60975307.png][]

这里只给个背景色

![5740143befa20cd28651d77932abd28e.png][]

没问题，样式生效

![c6ad50dbaa22a15f7596490d90002fbe.png][]

## 2 样式冲突 ##

在组件中写的样式，最后会汇总到一起，哪怕写了100个组件，这100的组件的样式也都是汇总到一起的，这样可能就会出现问题，比如类名冲突，下面我就演示一下

注意看，我这里有两个组件，组件的样式都叫test，但是样式不同，然后我让这两个组件的class相同

![df6bcfd4f5e88cf0f31dccfbb73bf227.png][]

发现出现了样式冲突，哪个组件先被引入，就会被后者给替换掉，也就是后者代替前者的样式

![73af1d88d698c711f191fb7107c05db7.png][]

### 传统解决办法 ###

如果想避免冲突，传统的解决办法是让样式名称不同，但是有点不现实

### vue解决办法 ###

vue给我们提供了解决办法，可以使用scoped属性，表示当前这个样式只适用于当前的组件

![8c38020f50aca213c3363425b15e5719.png][]

![9140e586249a6e385e0720a4616667e1.png][]

## 3 特别注意：APP组件 ##

scoped虽然好用,但是也不是适用于全部组件的，有一个人就比较特殊，那就是App

因为App是全部组件之父，一般在App里面写的样式，都是组件可以复用的，这时候给App组件声明scoped就不合适了

![889823c0d7a47cb8c7e965cedb4850bc.png][]

![11617811d40dbf17cdf0aa1d012675af.png][]

所以App组件一般不使用scoped,如果有的样式是App里面独有的，那么是可以使用的

## 4 总结 ##

scoped样式

作用：让样式在局部生效，防止冲突

写法：

[1774bae0aae99255afeada3e60975307.png]: https://img-blog.csdnimg.cn/img_convert/1774bae0aae99255afeada3e60975307.png
[5740143befa20cd28651d77932abd28e.png]: https://img-blog.csdnimg.cn/img_convert/5740143befa20cd28651d77932abd28e.png
[c6ad50dbaa22a15f7596490d90002fbe.png]: https://img-blog.csdnimg.cn/img_convert/c6ad50dbaa22a15f7596490d90002fbe.png
[df6bcfd4f5e88cf0f31dccfbb73bf227.png]: https://img-blog.csdnimg.cn/img_convert/df6bcfd4f5e88cf0f31dccfbb73bf227.png
[73af1d88d698c711f191fb7107c05db7.png]: https://img-blog.csdnimg.cn/img_convert/73af1d88d698c711f191fb7107c05db7.png
[8c38020f50aca213c3363425b15e5719.png]: https://img-blog.csdnimg.cn/img_convert/8c38020f50aca213c3363425b15e5719.png
[9140e586249a6e385e0720a4616667e1.png]: https://img-blog.csdnimg.cn/img_convert/9140e586249a6e385e0720a4616667e1.png
[889823c0d7a47cb8c7e965cedb4850bc.png]: https://img-blog.csdnimg.cn/img_convert/889823c0d7a47cb8c7e965cedb4850bc.png
[11617811d40dbf17cdf0aa1d012675af.png]: https://img-blog.csdnimg.cn/img_convert/11617811d40dbf17cdf0aa1d012675af.png