如何在vue scope的改变子组件样式总结

1.在写vue单文件时，在style标签上经常用scoped属性实现样式的私有化，使得样式只作用在当前组件上。对于组件来说，如果style添加上scoped属性，给当前子组件的结构都接天上一个data-v-xxxx自定义属性。

2.v-deep

• 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped> 
.a >>> .b { /* ... */ } 
</style>

• 当style是scss,less,sass时,使用 /deep/ ,但是vue-cli3以上版本无法使用

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

• 如果使用了预处理器(sass,stylus等等)都可以使用 ::v-deep

<style scoped>
.a{ 
::v-deep .b {
   /* ... */ 
   }
  }
 ------------------------
.a ::v-deep .b {
   /* ... */ 
  } 
</style>