1.我们在开发过程中，会使用很多组件，也会出现组件服用的情况，我们在书写组件时，往往会在style样式中使用scoped属性，表明样式只在当前组件生效，很好的实现了样式私有化的目的，避免了样式之间的互相污染与冲突。
2.但是我们在使用可复用性组件的时候，往往不可避免的遇到组件相同而样式不同的情况。这时我们就需要样式穿透，在父组件中写样式来作用在子组件身上，或者作用在孙子组件上，可跨越多个组件。
3.子组件
<template>
<div class="son"></div>
</template>
<style scoped lang="less">
.son {
width: 400px;
height: 400px;
background-color: yellow;
}
</style>
这时son背景颜色是黄色
4.父组件
<style scoped lang="less">
/deep/ .son{
background-color: pink;
}
</style>
这时son背景颜色变为粉色
<style scoped lang="less">
::v-deep .son{
background-color: red;
}
</style>
这时son背景颜色变为红色
5.爷孙组件样式穿透
<template>
<div>
<div class="grandSon">
我是孙子组件
</div>
</div>
</template>
<style scoped lang="less">
.grandSon{
width: 100%;
height: 100px;
background-color: yellow;
font-size: 30px;
color: red;
}
</style>
此时孙子组件背景颜色为黄色
子组件引入、注册、使用。
然后父组件引入子组件、注册、使用。
<style scoped lang="less">
/deep/ .grandSon{
background-color: pink;
}
</style>
此时孙子组件背景颜色变为粉色
<style scoped lang="less">
::v-deep .son{
background-color: red;
}
</style>
此时孙子组件背景颜色变为红色