scoped的原理及穿透使用

最新推荐文章于 2024-08-23 17:08:26 发布
最新推荐文章于 2024-08-23 17:08:26 发布
阅读量1.8k 收藏 2
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45839045/article/details/124416458
版权
Vue的scoped属性用于限制CSS样式仅作用于当前组件，防止样式污染。它通过PostCSS转换，在DOM节点和CSS选择器上添加data属性实现私有化。当需要修改第三方组件样式时，可以使用双style标签或者/deep/穿透。解决方案包括在不带scoped的style中编写覆盖样式，或使用预处理器的深度选择器。
摘要由CSDN通过智能技术生成

scoped的作用

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

scoped原理

vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。
也就是说既:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。

scoped的渲染规则：

  1. 给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素

  2. 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式

  3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

scoped穿透

scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。我们可以用以下方法

1.在模板中使用两次style标签
一个vue文件中可以使用多个style标签，在vue组件中不使用scoped属性在vue组件中使用两个style标签，一个加上scoped属性，一个不加scoped属性，把需要覆盖的css样式写在不加scoped属性的style标签里建立一个reset.css(基础全局样式)文件，里面写覆盖的css样式，在入口文件main.js 中引入
2.穿透scoped
style使用>>>
sass和less的样式穿透 使用/deep/

前端扫地僧
关注
Vue中的scoped及穿透方法
skysys的研究小屋
08-19 443
何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码： <style scoped> .exampl
vue 中 scoped 的原理
weixin_39111384的博客
12-25 414
之前写 vue 页面的时候，使用的是 快捷方式，打出 vue 之后使用 tab 键，就可以快捷的创建出 vue 页面的 template，script 和 style，之前一直有注意到 style 中有一个 scoped 的属性，但是一直不知道是干啥的。今天一个前辈给我讲了，所以记录下来，以供日后复习。
何为scoped？+ /deep/深度选择解析
weixin_30316097的博客
08-03 410
何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 /deep/深度选择解析 /deep/深度选...
CSS 样式穿透
XYX8958的博客
08-23 538
一般情况下，是在项目中引入了第三方的 UI 库（例如：ElementUI）时，我们需要通过“样式穿透”来更改样式。
scoped原理及使用
qq_42931285的博客
04-04 2017
scoped和deep原理及使用
scoped原理：
YY的博客
12-01 333
scoped原理
scoped 属性原理
weixin_42929962的博客
03-10 450
scoped 属性 vue单文件组件是通过vue-loader来解析的。 vue-loader作用：解析单文件组件，在style中添加scoped 属性，会自动在该组件所有标签上添加以data-v开头的特性名，只有子组件的根节点标签会添加父组件以及子组件的以data-v开头的特性，样式会受到两个组件的影响，其他的标签均只会受到子组件内定义的样式的影响。 scoped属性说明： 1.使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组
Vue中的scoped实现原理及穿透方法
08-27
Vue中的scoped实现原理及穿透方法 scoped是Vue中的一个特殊属性，可以将样式限制在当前组件内，避免样式污染。scoped的实现原理是通过PostCSS转译实现的。在转译过程中，PostCSS会为组件中的所有DOM添加一个...
详解Vue中的scoped及穿透方法
10-17
本文将深入探讨 `scoped` 的概念、工作原理以及如何在需要时穿透 `scoped`。 `scoped` 的由来源于CSS的作用域问题。在传统的CSS中，即使在一个模块化的环境中，导入的CSS样式仍然作用于整个页面，容易导致样式冲突...
scoped原理、穿透原理、哈希计算
qq_60893085的博客
01-29 1108
当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前组件，通过该属性，可以使组件之间的样式不相互污染。也就是实现组件私有化，起到样式隔离的作用。
Vue中的scoped实现原理和样式穿透方法及原理
热门推荐
豆。的博客
02-23 1万+
scoped 一、什么是scoped，为什么要用 在vue文件中的style标签上，有一个特殊的属性：scoped。 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx 给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原
浅析scoped属性原理及深度作用选择器
Dax1_的博客
02-10 1551
scoped作用 当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素 scoped目标 scoped是为了实现组件的私有化，表示style只属于当前模块，不对全局造成污染。 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。 scoped原理 通过观察渲染之后的html及CSS可以发现，添
vue 中的scoped原理
wlijun_0808的博客
05-29 1748
scoped作用 在vue文件中的style标签上加上scoped属性，则style标签下的样式只能在本组件中使用。 如果每一个vue组件的style标签都加上了scoped，那就实现了样式的模块化。 scoped原理 代码样例展示： <template> <div class='demo'>scoped展示</div> </template> <style scoped> .demo{ color:'red' } </style>
样式污染引发的思考：scoped原理
小易不止于搬砖的博客
02-11 1932
1、用法 scoped是实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。（事实上， scoped是一个boolean值） 2、原理（postcss） 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性 <style scoped lang="less"> .example{ color:red; } </style> <template> <
【面试】面试官：说说scoped的原理
qq_46580087的博客
05-10 502
我始终相信，走过平湖烟雨，岁月山河，那些经历劫数，尝遍百味的人，会更加生动而干净。
scoped穿透
weixin_43817197的博客
06-17 551
解决修改vue中第三方UI组件样式的问题. 1.style的样式穿透 使用 >>> 外层 >>> 第三方组件 { 样式 } .wrapper >>> .swiper-pagination-bullet-active{ background: #fff } 2.sass和less的样式穿透 使用/deep/ 外层 /deep/ 第三方组件 { ...
一文彻底弄懂scoped的原理,导致的问题及解决的办法
qq_40544291的博客
03-27 3016
原理: 给元素添加唯一属性（同一组件中所有dom添加的属性值相同），然后通过属性选择器获取该元素(类似于人的身份证,在这个组件中是唯一的) 通过 PostCSS 实现以下转换 <template> <div class="test">hello</div> </template> <style scoped> .example { ...
scoped样式如何穿透？
最新发布
09-12
scoped属性是Vue.js中用于CSS样式的作用域限定，它通过添加一个独一无二的属性选择器来确保样式只作用于当前组件的元素。然而，在某些情况下，我们可能需要让某些样式能够突破这个作用域的限制，即所谓的scoped样式穿透。 要实现scoped样式的穿透，可以使用:not()伪类选择器配合当前组件的独有属性。例如，如果你有一个scoped样式定义如下： ```css <style scoped> .father >>> .child { color: red; } </style> ``` 这段代码表示选中当前组件内所有具有父子关系的元素，让子元素的文本颜色变成红色。不过，这种方法在Vue.js中是不被推荐的，因为它违反了封装原则。 推荐的方法是使用深度选择器，Vue.js 2.3.0+版本开始支持，需要在选择器前面加上`>>>`或`/deep/`。例如： ```css <style scoped> /deep/ .child { color: red; } </style> ``` 或者 ```css <style scoped> >>> .child { color: red; } </style> ``` 这两种方式都会穿透作用域，将样式应用于子组件中对应的类。 但是要注意，在Vue.js 3中，推荐使用`:slotted`伪类来穿透作用域，如： ```css <style scoped> ::v-slotted(.child) { color: red; } </style> ``` 穿透scoped样式时，要特别注意不要无意间影响到其他组件的样式，保持选择器的特异性尽可能高以避免潜在的样式冲突。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值