何为 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——组件内部 domhtml
为何须要穿透 scoped
scoped 看起来很美，可是，在不少项目中，会出现这么一种状况，即：引用了第三方组件，须要在组件中局部修改第三方组件的样式，而又不想去除 scoped 属性形成组件之间的样式污染。此时只能经过特殊的方式，穿透 scoped。vue
白话就是说，好比使用 element-ui 的样式，在 demo.vue 中使用 table 组件，而且 style 上加 scoped，在修改 table 组件里边的样式是不生效的，由于 data-v-009 只加在
子组件的第一层，子组件中其余 dom 是没有 data-v-009 这个属性的，而写在 scoped 中的样式都会被 postcss 添加[data-v-009],样式只做用于有 data-v-009 这个属性的 dom
不管权值多高，甚至添加!important，都没法修改子组件中样式的 element-ui
慎用 scoped
父组件无 scoped 属性，子组件带有 scoped，父组件是没法操做子组件的样式的（缘由在原理中可知），虽然能够在全局中经过该类标签的标签选择器设置样式，但会影响到其余组件
父组件有 scoped 属性，子组件无，父组件也没法设置子组件样式，由于父组件的全部标签都会带有 data-v-469af010 惟一标志，但子组件不会带有这个惟一标志属性，与 1 同理，虽然能够在全局中经过该类标签的标签选择器设置样式，但会影响到其余组件
父子组建都有，同理也没法设置样式，更改起来增长代码量
解决方法
穿透 scoped
注意 stylus 的样式穿透 使用>>> sass 和 less 的样式穿透 使用/deep/segmentfault
<style scoped>
/* 外层 >>> 第三方组件 {
样式
} */
/* 使用如下这段没法修改table样式 */
.el-table__header-wrapper {
height: 20px;
}
/* 穿透以后能够顺利修改element-ui样式 */
.el-contain-row /deep/ .el-table__header-wrapper {
height: 20px;
}
</style>
使用两个 style 标签
<style>
/* 用于修改第三方库的样式 */
</style>
<style scoped>
/* 本身的组件内样式 */
</style>
添加 class
经过在外层 dom 上添加惟一的 class 来区分不一样组件。这种方法既实现了相似于 scoped 的效果，又方便修改各类第三方组件的样式，代码看起来也相对温馨。app
<style>
.my-class {
color: red;
/* 全部样式都被包含在my-class中 */
}
</style>
<template>
<div class="my-class">
<!-- dom结构 -->
</div>
</template>