vue样式穿透 ::v-deep

vue样式穿透 ::v-deep的具体使用:

在vue项目开发中，我们一般都是<style lang="scss" scoped> .... </style>中编写只会影响当前组件内的样式，但如果最后将这些组件整合的时候发现有些样式不够完美（或需要覆盖element-ui中的样式时），想要去修改样式时却发现无法生效，去掉scoped的话又会影响全局样式。
在网上找了很久，发现可以使用>>>或/deep/来解决

1. >>>
   如果vue中style使用的是css，那么则可以使用>>>

   <style lang="css" scoped>
   	.a >>> .b { 
   	 /* ... */
   	}
   </style>
   

2. /deep/
   如果vue中使用的是style使用css(less, sass, scss)的预处理器，则需要使用deep，因为scss预处理器是无法解析>>>的

   <style lang="scss" scoped>
   	.a{
   		/deep/ .b { 
   		 /* ... */
   		}
   	} 
   </style>
   

3. ::v-deep
   如果你是使用vue-cli3以上版本的脚手架创建的项目，使用/deep/可能会出现报错信息。如果出现报错或失效等问题，则可以使用::v-deep。

   <style lang="scss" scoped>
   	::v-deep .a{
   	 /* ... */
   	} 
   </style>
   

   注意：必须是要以双冒号开头的
   如果你希望 scoped 样式中的选择器能够作用得“更深”，例如影响子组件，你可以使用以上方法来实现！！！