小前端有话说之：Vue在使用组件库（Vant Element）等修改其样式问题 以及Scoped、穿透的理解

在讲穿透之前 我们先了解一下 在Vue中更改样式为何要加scoped 这一属性

原理是：vue在编译的时候通过在DOM元素以及样式上加上唯一标记，dao实现样式私有化，不污染全局样式。

 一般用vue框架，在组件中为了不相互影响各自的样式，都会在 style 标签上加上 scoped , scoped 的作用是限制了样式的作用范围，只在本页有效。

通俗的来说 ： Scoped 是会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但如果你引用了第三方组件：
默认只会对组件的最外层（div）加入这个 [data-v-xxxx] 属性，但第二层开始就没有效果了
====>如下图所示

加入scoped 使用穿透后

穿透的几种方法：
1.在sass 中 >>> 穿透无法正确解析 不起效果
但用/deep/同样不起效果 只有 ::v-deep 时生效
2.独立分写style css 且必须加上scoped 用>>> 穿透 否则覆盖不成功
3.直接写style 不加任何 加上其类名 但全局都会受影响

<style lang="scss" scoped>
.all {
    background:#f9f9f9;
    ::v-deep   .van-tab__text {
        color: black;
	    }
	}
}

<style scoped>
 .all >>> .van-tab__text {
  color: black;
} 
</style>