Vue中的scoped

什么是scoped

在vue文件中的 style 标签上，有一个特殊的属性：scoped。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了scoped，相当于实现了样式的模块化。

scoped实现原理

转译前：

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <div class="example">hi</div>
</template>

转译后： 

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <div class="example" data-v-5558831a>hi</div>
</template>

PostCSS 给一个组件中所有的 DOM 添加了一个独一无二的动态属性，然后给 CSS 选择器额外添加了一个对应的属性来选择该组件中的 DOM，这种做法使得样式只作用于含有该属性的 DOM ——组件内部 DOM 。

这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件，就会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式。可以使用下面的方法来解决：

scoped穿透

当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除 scoped 属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透 scoped 。

1. 使用 >>> 可以穿透 scoped 属性，修改其他第三方组件的样式。

<style scoped>
  外层 >>> 第三方组件 {
    样式
  }
</style>

2. 使用曲线救国的一个方法，用两个 style 标签，一个带 scoped 属性，一个不带 scoped 属性，用来修改第三方组件的样式。

<style>
  /* 全局样式 */
</style>

<style scoped>
  /* 局部样式 */
</style>

3. 使用 sass 或 less 的样式穿透 /deep/

<style scoped>
/deep/ .title {
  color: #888;
}
</style>

4. 还有一种就是不使用 scoped 属性，通过在最外层加 id 或者 class 的形式进行区分。