使用场景
当我们在开发的过程中，为了避免组件之间的样式名重复导致组件样式相互影响，会对某个组件的style标签加上scoped属性，如<style lang='scss' scoped>，这样所写的样式就只对当前组件生效了，不会污染其他组件样式
实现原理
scoped是Vue中引入的处理样式属性，目的是使样式私有化（模块化），不对全局造成污染。使用该属性会在该为该组件自动添加一个唯一的属性为组件内的CSS 样式定作用域，该属性使用了data-v-hash（hash是随机的哈希值）的方式来对模块进行标识。当我们在组件的style标签中添加scoped属性后，vue中的scoped属性的效果主要通过PostCSS转译实现，Vue在对该组件进行编译后会组在件里面的dom元素中添加data-v-hash属性。
造成问题
在父组件内无法修改子组件的样式，有时可能在开发过程中我们需要修改element-ui等第三方库的组件样式也没办法
解决办法
- 在当前style标签内使用深度作用选择器
style为css、stylus时的写法如下
.a >>> .b { *** }
style使用css的预处理器(less, sass, scss)时的写法如下
/deep/ .a { *** }
::v-deep .a{ *** }
总结：如果你使用的css/stylus模式可以使用>>> 操作符，如果使用less模式可以使用 /deep/ 操作符，如果使用sass/scss模式可以使用::v-deep操作符来实现深度作用选择器操作
- 新起一套不加scoped的样式单独控制
