样式穿透vue中的scoped详谈

目录
  • 前言
  • scoped的使命与作用
  • scoped的副作用
  • 样式穿透（::v-deep）
  • 总结

前言

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

scoped的使命与作用

这里用vue做了一个demo,两个页面，一个页面中是掘金的a标签，一个页面是vue的a标签,我们一起看下scoped的作用,给其中一个页面的a标签加上红色，另外一个没有加任何样式，并且没有在style中使用scoped，如下图

答案大家应该都知道，没错！两个页面中的链接文字都变成了红色，当我们点击juejin这个页面的时候，浏览器会自动引入当前页面的样式，再去点击github时浏览器会复用这个样式，所以a链接的颜色都会变红，因为Vue是单页面应用，所以我们打开的每一个页面的样式都会被夹在成全局的样式，解决办法就是加上scoped,这时a标签的颜色就不同了，我们打开页面看下a标签(下图)

这时候的a标签多了一个data-v-xxxxxxx这个东西，这个就是Vue替我们加上的， Vue在构建构建这个项目的时候会提我们以组件单位，不同的组件下所有的元素都会加上同一个类似组件ID的东西，同时会在我们写的样式上以属性选择器的方式拼接上这个唯一标识，我们来验证一下，（下图）

对的，我们加上scoped之后Vue会在这段样式的最后一段加上这个属性，然后通过属性选择器选中这个元素，从而实现元素样式的隔离，接下来我们一起看下scoped的副作用

scoped的副作用

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

我们检查一下元素(下图)

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

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

样式穿透（::v-deep）

我们现在就加上样式穿透就可以命中目标

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

这时候我们看下构建后的样式Vue会怎么处理(下图)

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

总结

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

以上就是样式穿透vue中的scoped的详细内容，更多关于vue scoped样式穿透的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的,可以让你更清晰的了解你的项目样式是怎么运作的. 先来说说实现方式 vue中的样式作用域是通过属性选择器来实现的,例如同样一个类名,我们是通过 .类名[属性名] 来做区分的,我们这里主要是要搞清楚这里的属性名是怎么分配的. 样式作用域规则 接下来我们分情况来说一下样式作用域: 对于有样式作用域的组件

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • 详解从vue-loader源码分析CSS Scoped的实现

    虽然写了很长一段时间的Vue了,对于CSS Scoped的原理也大致了解,但一直未曾关注过其实现细节.最近在重新学习webpack,因此查看了vue-loader源码,顺便从vue-loader的源码中整理CSS Scoped的实现. 本文展示了vue-loader中的一些源码片段,为了便于理解,稍作删减.参考 Vue CSS SCOPED实现原理 Vue loader官方文档 相关概念 CSS Scoped的实现原理 在Vue单文件组件中,我们只需要在style标签上加上scoped属性,就可

  • 解决vue scoped html样式无效的问题

    1.问题场景 page1,page2都使用flexible移动端自适应的时候,有一个页面page2需要手动设置rem基准值, //手动设置基准 html{ font-size: 120px !important; } 但是在page2引用的self.less里面设置了基准,竟然没有生效 2.问题分析scoped属性 在引用self.less的时候,使用了属性scoped vue中引入了scoped这个概念,设计思想就是让当前组件的样式不会修改到其他页面的样式,使用了data-v-hash的方式来

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • Vue scoped及deep使用方法解析

    众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件. 原理如下------- 在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个[data-v-hash]属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素.值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被

  • 样式穿透vue中的scoped详谈

    样式穿透vue中的scoped详谈

    目录 前言 scoped的使命与作用 scoped的副作用 样式穿透(::v-deep) 总结 前言 我们平常在开发过程中特别是Vue技术栈的前端同学们,经常会用到一些UI组件库,特别是element-ui使用的频率是比较高的,我们经常会修改这些UI组件库的默认样式时会使用到深度选择器,大家都知道这么做,有没有想过为什么?趁着疫情在家于是研究了一下,在这里分享一下 scoped的使命与作用 这里用vue做了一个demo,两个页面,一个页面中是掘金的a标签,一个页面是vue的a标签,我们一起看下s

  • 详解Vue中的scoped及穿透方法

    scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这

  • Vue中的scoped实现原理及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp

  • 基于vue中的scoped坑点解说

    今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件.通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的. 代码如下: //valChange.less(使用了嵌套规则) #valueSlide{ .bigSlider

  • Vue中对比scoped css和css module的区别

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成

  • Vue中的组件详谈

    Vue中的组件详谈

    目录 一.组件的注册 二.组件的使用 三.父传子 四.子传父 五.插槽 六.子组件给插槽传值 总结 一.组件的注册 组件注册需要注意的有五点: 1.data要写成函数,并且用return返回一个值,这样不同的调用才能互不影响 2.template后面跟的是飘号,就是Tab上面那个键 3.template后面的内容要写在一个大的div里面,不要分开多个div 4.props后面的是数组,因为有很多个prop 5.要保存成js文件 Vue.component("myson",{ data(

  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有

  • vue样式穿透 ::v-deep的具体使用

    之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富.即时这样,在项目中肯定也需要用额外的样式来打造自己的应用.直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会影响全局样式.想了好多方法,都没得到很好的解决. 百度之后发现 可以用 /deep/或::v-deep来解决***(不过在vue3.0的环境下,使用/deep/时,编译会报错)***.没想

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

随机推荐