vue ＜style＞标签的scoped 属性

Myth丶恋晨 2022-09-03 01:15 381阅读 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 条评论，381人围观）

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

相关阅读

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

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

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

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

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

缺乏、安全感/ 2023年10月06日 23:50/ 0 赞/ 3 阅读

相关 Vue elementUI table的slot-scope属性

参考 : [https://blog.csdn.net/qq\_34995862/article/details/89532585][https_blog.csdn.net_q

红太狼/ 2023年07月14日 08:30/ 0 赞/ 20 阅读

相关 vue scoped属性的作用

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

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

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

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

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

相关 VUE_vue动态绑定style属性

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

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

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

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

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

相关 Vue动态设置Style属性

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

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

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

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

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

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

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

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