为什么要使用 scoped 样式？

基于：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

在我们编写单文件组件时，难免会遇到两个不同的 组件 其内部的元素具有相同的 class、id 名的情况，但在 Vue 中 如果两个组件内的两个元素的 class 名称相同，则会无法正确解析，scoped 便是为了解决这个问题而出现的。

如何使用 scoped 样式

来看一下不加 scoped 选项的 Student.vue 和 School.vue 的代码：

/* Student.vue */
<style>
  .demo{
    background-color: #3BA776;
  }
</style>
复制代码

/* School.vue */

复制代码

再来看一下渲染后的界面：

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1f4db1ab5c842c18f0cc62616ee699d~tplv-k3u1fbpfcp-watermark.awebp?)

可以看到：虽然 `School.vue` 的 `background-color` 的值为 `orange`，但是实际上展示出来的颜色确是 `Student.vue` 内的 `#3BA776` 绿色，这其实与你在 `App.vue` 中组件的注册顺序有关：

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0aa3a3acef2f4252a640e076f6df67e3~tplv-k3u1fbpfcp-watermark.awebp?)

为了避免以上的这种情况，让我们可以在每个独立的组件内使用相同的 `class` 名称，只需要在 **组件**`.vue` 的 `<style>` 标签内加上 `scoped` 选项即可。更改后的代码：

/* Student.vue */

复制代码

/* School.vue */
<style scoped>
  .demo{
    background-color: orange;
  }
</style>
复制代码
```

现在，所写的每个页面的 `style` 都可以正常显示：

![image.png](https://img-blog.csdnimg.cn/img_convert/47c4009dd3facc1d95c5b7da94c862fe.webp?x-oss-process=image/format,png)

* * *

**－－完－－**