likes
comments
collection
share

scoped属性及样式穿透

作者站长头像
站长
· 阅读数 262

scoped属性是前端开发中经常接触的一个样式属性。那么,我们应该怎么应用好这个属性,加快我们的工作进度呢?下面我会从以下几个方面来谈谈我工作中遇到的关于scope属性的问题。

一、应用场景

在vue项目中我们经常会使用组件库,组件库本身具有自己的style属性,但是组件库本身的style属性不一定是我们需要的。比如边距、颜色、大小等属性。一些重要的、通用的属性可以通过组件库给我们提供的指令来设置,但是,在更一般的情况下,组件库提供的指令不足以我们完成日常的开发工作,我们需要在组件上设置一些样式,此时我们就需要用到scoped属性以及样式穿透。

二、概念引入

1.属性选择器

如图,想要选中页面A中的第一个a标签,光有类名和标签名是不够的,还需要加上a标签自定义的[one]属性。

  • 属性选择器选中第一个a

scoped属性及样式穿透

scoped属性及样式穿透

属性选择器相当于java中方法或类的签名,标识了唯一的标签或页面。

2.scoped属性是什么

scoped是“作用域”的意思。在我们的style标签中,除了要声明CSS属性的lang属性(SCSS、LESS等),还要声明scoped属性。

scoped作用于单页面应用,是为了形成各个页面之间的隔离。因此,单页面应用首次加载就会加载页面中所有的CSS文件。

如果不加scoped的情况。

以a标签为例:A、B页面同时有a标签。A页面中的a标签没有设置颜色,B中的a标签设置了颜色。如果先点开(加载)A页面,则A页面中的a标签也会被渲染成红色。

scoped属性及样式穿透

但是如果加上scoped。在声明a标签样式的B文件的style上设置scoped属性,我们会看到属于B页面的样式文件被加上了一个data-id属性。

scoped属性及样式穿透

由此可以总结scoped属性的作用:

形成各个页面之间样式的隔离。他的作用机制是vue内部为每个页面上的样式都加上了唯一的标识符(属性)。

[注意]

在某些情况下,形如

const routeA =()=>import("A.vue")

这种按需引入路由(路由懒加载)的情况可能不会复现上面的情况,是因为懒加载的过程中,每个页面都会单独的引入,不会首屏加载的时候就全部加载。

综上所述。在vue创建项目时,每个vue组件会以属性选择器的方式拼接上一个唯一的标识符,类似于data[v-ddddd],形成页面之间的隔离。

3.scoped的副作用

我们要保证不能污染样式,因此必须有scoped,但是在特殊情况下,元素应该怎么选中呢?

例如,有一个div,里面有一个el-input,我们想通过选中div下的input框的形式来选中元素,常规情况我们会这么写:

scoped属性及样式穿透

但是页面上为我们的input拼接了属性id,因此我们的常规写法永远无法选中。

scoped属性及样式穿透

4.解决方式:样式穿透

v:deep比较常用,或者用 >>> 样式穿透加上的位置相当于占位符,vue帮我们把属性值拼接到占位符的位置。

scoped属性及样式穿透

问题完美解决。scoped属性及样式穿透

三、特殊场景的解决措施

1.排查

有时候,页面抖动(先打开A页面,然后B页面的样式突然抖动一下)就是因为scoped属性惹的祸。要仔细检查有没有样式冲突,scoped是否声明。

2.特殊方法

还有就是在极其特殊的情况下,样式穿透也无法选中元素,我们此时可以在子页面最外层声明class属性,通过类的唯一名称隔离不同的文件(被特殊处理的css属性写在子页面中,另写一个style标签,不写scoped属性,只对本页面负责)

[

欢迎大家提出宝贵意见。

]