vue的scoped情况下通过父组件修改子组件的样式

在正常情况下vue父组件中是无法修改子组件的样式
但是又不能去掉scoped，因为去掉scoped会污染全局的样式
所以可以选择使用深度选择器

1.>>>

如果项目使用的是css原生样式，那么可以直接使用>>>穿透来修改样式

编译前：

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

编译后：

.a[data-v-f3f3eg9] .b { /* ... */ }

2./deep/

项目中用到了预处理器scss、sass、less等，则操作符>>>可能会因为无法编译而报错。可以使用/deep/或者::v-deep组合器-两者都是>>>的别名，并且工作方式完全相同。

注意：vue-cli3以上版本不可以

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

3.::v-deep

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