vue ＜style＞标签的scoped 属性

Myth丶恋晨 2022-09-03 01:15 190阅读 0赞

大家都知道当 <style> 标签有 scoped 属性时表示它的样式作用于当下的模块，很好的实现了样式私有化的目的。 那么他是怎么实现的呢，大家看一下编译前后的代码就明白了：

编译前：

<style scoped>
    .example {
    color: red;
    }
    </style>

编译后：

<style>
    .example[data-v-f3f3eg9] {
    color: red;
    }

vue通过在DOM结构以及css样式上加唯一不重复的标记，其实就是在你写的组件的样式上添加了一个属性而已，以保证唯一，这样就实现了所谓的私有作用域。

但是也会有弊端：

一、考虑到浏览器渲染各种 CSS 选择器的方式，当 p \{ color: red \} 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example \{ color: red \}，性能影响就会消除。所以，在你的样式里，进来避免直接使用标签，取而代之的你可以给标签起个class名。

二、同时也存在一个新的问题---样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的。（scoped设计的初衷就是不能让当前组件的样式修改其他任何地方的样式）

三、大家都知道css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。css样式优先级参考： [https://www.jianshu.com/p/f4df99cc662e][https_www.jianshu.com_p_f4df99cc662e]

如果你希望 scoped 样式中的一个选择器能够作用或者说作用的“更深”，例如影响子组件，你可以使用 >>> 操作符:

>>>.el-table td, .el-table th {
        padding: 8px 0;
    }

上述代码将会编译成：

[data-v-7c12301b] .el-table td, .el-table th[data-v-7c12301b] {
        padding: 8px 0;
    }

而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：

/deep/ .el-table td, .el-table th {
        padding: 8px 0;
    }

[https_www.jianshu.com_p_f4df99cc662e]: https://www.jianshu.com/p/f4df99cc662e

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中＜style scoped lang=“scss“＞的含义

标签中使用的是SCSS语法编写的样式。SCSS是Sass（Syntactically Awesome Stylesheets）的一种语法，它是一种CSS预处理器，提供了许...

短命女/ 2024年04月29日 00:43/ 0 赞/ 6 阅读

相关 vue scoped属性的作用

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素。作用功能：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块虽然

深藏阁楼爱情的钟/ 2023年02月13日 11:44/ 0 赞/ 95 阅读

相关 style 标签属性 scoped 的作用和原理

在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性，对于这个 scoped 属性的了解做一下介绍。 1、作用当 style 标签里面有 s

约定不等于承诺〃/ 2023年01月09日 15:50/ 0 赞/ 146 阅读

相关 VUE_vue动态绑定style属性

方式一：  <div :style="{ height: `${ statusBarHeight}px

妖狐艹你老母/ 2022年12月27日 12:50/ 0 赞/ 147 阅读

相关 maven 中＜dependency＞标签中的 scope属性的作用

[maven scope属性值设置含义][maven scope] 1、枚举各个属性值的含义 compile，缺省值，适用于所有阶段，会打包进项目。 pro

Dear 丶/ 2022年12月20日 02:11/ 0 赞/ 144 阅读

相关 vue style样式中scoped无效解决方案

如果你使用的是import方法导入样式后无效，解决方案如下： // 第一种（最快捷）将 <style scoped> @import '.

àì夳堔傛蜴生んèń/ 2022年11月27日 10:29/ 0 赞/ 508 阅读

相关 Vue动态设置Style属性

[Vue动态设置Style属性\_fuzhongbin的博客-CSDN博客\_vue 动态style][Vue_Style_fuzhongbin_-CSDN_vue _sty

╰+哭是因爲堅強的太久メ/ 2022年09月14日 03:06/ 0 赞/ 552 阅读

相关 vue ＜style＞标签的scoped 属性

大家都知道当 <style> 标签有 scoped 属性时表示它的样式作用于当下的模块，很好的实现了样式私有化的目的。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了

Myth丶恋晨/ 2022年09月03日 01:15/ 0 赞/ 191 阅读

相关 vue：style标签中的scoped属性（作用域）和lang属性的介绍

1、什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增

叁歲伎倆/ 2022年09月02日 04:15/ 0 赞/ 156 阅读

相关 Maven的scope属性

在Maven的依赖管理中，经常会用到依赖的scope设置。这里整理下各种scope的使用场景和说明，以及在使用中的实践心得。 scope的使用场景和说明 1.comp

快来打我*/ 2022年05月14日 08:45/ 0 赞/ 202 阅读