前言

什么是scoped
scoped是Vue文件中的style标签上的一个特殊的属性，当一个style标签拥有scoped属性时，它的css/less样式只能作用于当前的Vue的组件，也就是不会污染其他组件的样式。
scoped实现的原理
scoped属性实现的效果是通过PostCss插件实现，会给每个样式配置一个唯一的标识编号：

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

scoped穿透

scoped使用起来非常方便，但是具体也会存在一个比较大的坑，就是在引入第三方的ui库的时候，想要修改引入ui库的样式的时候，又不想去除scoped属性造成组件之间的样式覆盖。这个时候我们就是可以通过特殊的样式的去穿透scoped。
①vue2（::v-deep）、vue3（:deep()）

<style scoped> 
.my-Txt { width: 200px; } 
.my-Txt ::v-deep input { background-color: pink; } 
.my-Txt :deep() input { background-color: pink; } 
</style>

②>>>或者/deep/（less或者sass之类预处理无法解析>>>,因此推荐使用/deep/）

<style lang="scss" scoped> 
.box { 
/deep/ input { background-color: pink; } 
</style> 
或者
<style lang="scss" scoped> 
.box >>> input { background-color: pink; }  
</style

浅谈Vue中使用scoped的坑

前言

scoped穿透