在项目开发过程中，我们经常会用到scoped来使样式文件只适用于当前模块，scoped设计的初衷就是让样式变得不可修改，可以很好的实现私有化
简单介绍一下scoped三条渲染规则
- dom：html的dom节点会有唯一的data属性（例如下方的data-v-5558831a）
<div data-v-5558831a class="header">
<div data-v-5558831a class="header-left"></div>
<div data-v-5558831a class="header-input">输入城市景点，游玩主题</div>
<div data-v-5558831a class="header-right">城市</div>
</div>
- css：编译后的css选择器末尾会加一个当前组件的data属性来私有化样式
.header .header-left[data-v-5558831a] {
width: 0.64rem;
float: left;
}
- 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
<div class="home">
<home-header></home-header>
</div>
编译后：
<div data-v-0c57a6db class="home">
<div data-v-5558831a data-v-0c57a6db class="header">
<div data-v-5558831a class="header-left"></div>
<div data-v-5558831a class="header-input">输入城市景点，游玩主题</div>
<div data-v-5558831a class="header-right">城市</div>
</div>
</div>
注：由此便可得知父组件scoped内样式无法修改子组件元素样式的原理了
样式穿透
适用范围：
- 父组件添加scoped之后，解决在父组件中无法修改子组件样式问题
- 对公共组件的样式实现微调
- 对设置了scoped的子组件里的元素进行控制
方法：
- 🌟在scoped样式中设置样式穿透，使之不受scoped的限制
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff !important
</style>
// 注：样式穿透是vue-loader的特性
// 当lang = less or sass 时 解析不了">>>"符号，则使用 /deep/
.a /deep/ .b {
/*样式*/
}
