从scoped中获取风格与隔离策略

好的，我将为你解答【vue】单文件sfc里的scoped是什么？

在学习scoped之前，我们先了解一下基础的一些内容，帮助我们更轻松的理解scoped到底是什么？

首先，看看下面的代码，注意看style里面的内容。

<template>
  <div class="h1">你好，世界！</div>
  <div class="h2">scoped 样式</div>
</template>

<style>
.h1 {
  color: red;
}
.h2 {
  color: blue;
}
</style>

这样写没有什么问题，网页运行时，h1 标签的内容会变成红色，h2 标签的内容会变成蓝色。

现在，看看下面的代码：

<template>
  <div class="box">
    <!-- 调用组件A -->
    <comp-a></comp-a>
    <!-- 调用组件B -->
    <comp-b></comp-b>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
</style>

<!-- 组件A -->
<template>
  <div class="h1">我是组件A</div>
</template>

<style>
.h1 {
  color: red;
}
</style>

<!-- 组件B -->
<template>
  <div class="h1">我是组件B</div>
</template>

<style>
.h1 {
  color: blue;
}
</style>

网页运行时，如果你仔细观察，你会发现：

• 组件A 的 h1 标签的文本是红色的
• 组件B 的 h1 标签的文本是蓝色的
• 组件A 的 h1 标签的样式对组件B 的 h1 标签没有影响
• 组件B 的 h1 标签的样式对组件A 的 h1 标签没有影响

这是因为，每个组件的样式都是独立的，不会影响到其他组件。

这正是scoped的作用。scoped可以将组件的样式与其他组件的样式隔离。

在SFC中，scoped属性可以添加到style标签中，以启用样式隔离。

<style scoped>
.h1 {
  color: red;
}
</style>

当scoped属性添加到style标签中时，该样式仅应用于该组件的元素。其他组件不会受到该样式的影响。

scoped属性可以帮助我们避免样式冲突，并使我们的代码更易于维护。

---