Vue中的scoped及穿透方法

scoped的作用：

　　实现组件的私有化，表示当前style属性只作用于当前模块，不对其他组件样式造成污染。

scoped的原理：

　　通过在style上删除scoped以及增加scoped属性时，观察DOM结果可以发现，VUE在编译的时候，会在标签上加上唯一的标识，以达到私有化，从而保证样式只作用于当前组件。如下图：

　　 ===》

 

　　 ===》

 

 

scoped的穿透：

　　当我们项目中引入了第三方组件的样式时，需要在项目中局部修改第三方组件的样式，而又不能去除scoped属性，此时可以通过穿透的方法：>>>

　　在Sass之类的css预处理器无法正确解析时，可以使用/deep/操作符（>>>的别名）

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

　　项目实例：

<style lang="stylus" scoped>
    .swiper_wrap >>> .swiper-pagination-bullet-active 
        background-color: #fff
    .swiper_img 
        width: 100%
    
</style>