这篇文章主要介绍vue 样式穿透 ::v-deep 的具体使用，文中通过示例代码介绍的非常详细，
之前项目使用了vant,使用非常简单 ，而且组件也非常的丰富。即使这样，在项目中vant组件自身的样式还是会满足不了需求，这个时候需要用额外的样式来修改组件样式。直接在<style lang="scss" scoped>...</style>中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。
深度作用选择器
如果你希望scoped样式中的一个选择器能够作用得更深，例如影响子组件，你可以使用>>> 操作符
<style scoped> .a >>> .b{/* .... */} </style>
上述代码将会编译成 .a[data-vf3f3eg9] .b{/* ..... */}
1. >>>
如果vue 的style使用的是css,那么可以使用
<style lang=“css” scoped>
.a >>> .b{/* .....*/}
</style>
但是像scss等预处理器无法解析 >>> ，所以我们使用下面的方式
2 /deep/
<style lang="scss" scope>
.a {
/deep/ .b{
/* .... */
}
}
</style>
但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告
此时我们可以使用第三种方式
3 ::v-deep
切记必须是双冒号
<style lang="scss" scoped>
.a{::v-deep .b{/* ....*/}}
</style>
使用场景：当我们需要覆盖element-ui中的样式时只能通过深度作用选择器
style 为css时的写法如下
.a >>> .b{
}
style 使用css的预处理器（less ,sass,scss）时写法如下
第一种
/deep/ .a{
}
第二种
::v-deep
建议使用第二种方式，/deep/在某些时候会报错，::v-deep更保险且编译速度更快
