1. 介绍

在 Vue 中，我们可以使用 scoped 特性来给组件的样式添加作用域。通过为组件的 <style> 标签添加 scoped 特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。

2. 基本使用

<template>
  <div class="example">
    <h1>Scoped Styles</h1>
  </div>
</template>

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

在上面的例子中，.example 类的样式只会应用于该组件的模板中，而不会影响其他组件或全局样式。

3. scoped原理

• 给当前元素及子元素都加上data-v-开头的一串随机 hash 值
  
• css中通过属性选择器选择这个 hash ,这样就确保了唯一性，避免样式污染
  

4. 穿透选择器修改全局样式

我们用vue开发过程中，总是会用到各种组件库，如：ElmentUI/andt design等等，或者我们自己封装的组件，这些组件库提供的组件样式有时并不满足实际需求，这时候就需要使用穿透选择器来修改样式。

下面是一个使用穿透选择器的例子：

此时我们在自己的组件中修改 btn 组件的样式，发现并没有效果：

vue提供了:deep()选择器：

<template>
  <div class="example">
    <btn>Scoped Styles</btn>
  </div>
</template>

<style lang="scss" scoped>
.example {
  :deep(.content) {
    color: red;
  }
}
</style>

当然了在 sass 中我们还可以使用 ::v-deep (在 less 中使用 /deep/ )来修改样式，也是可以实现的。