vue 的 scoped

前言

我们平常在开发过程中特别是Vue技术栈的前端同学们，经常会用到一些UI组件库，特别是element-ui使用的频率是比较高的，我们经常会修改这些UI组件库的默认样式时会使用到深度选择器，大家都知道这么做，有没有想过为什么？趁着疫情在家于是研究了一下，在这里分享一下

scoped的使命与作用

scoped的副作用

这时我们引入element-ui验证一下scoped的副作用，这里写了一个demo(下图)，这里也使用了scoped

注意这里的input元素是没有例如data-v-xxxxxx的唯一标识的
但是我们自己写的样式（my-Txt input）在被构建之后是什么样子的呢？(下图)

如上图所示，我们自己写的样式却被拼接了这个唯一的标识，所以我们再怎么操作也是没法命中这个元素的，也就是说Vue并没有给这个input加上这个标识，但是却在我们的样式中加上了这个标识，但是我们如果把scoped去掉，那么就能命中目标，但是这样我们是不推荐的，样式会被打包到统一的样式中，这就是scoped的副作用，那我们怎么解决它呢？样式穿透

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

我们可以看到这个唯一标识从input后面跑到了my-Txt的后面了，也就是说我们不加入这个::v-deep,Vue永远都会把这个唯一的标识拼接在我们写的样式的最后一段，如果我们想改变这个唯一标识的位置，就需要你用样式穿透来指定，那么上图的意思就是带有这个唯一标识的my-Txt的元素，它的子元素中的input会应用这个样式，而我们写的这个my-Txt也是具备这个唯一标识的，从上面图可以看到

总结

为了解决多页面应用中不同组件中的样式隔离问题，Vue引入了scoped样式的概念，但是Vue不会把所有的元素都加上唯一标识，导致我们没办法命中这个元素的时候，我们就要用样式穿透来指定这个唯一辨识被拼接到css样式的哪一段！！！

这篇好文章是转载于：学新通技术网