vue中scoped原理以及scoped的穿透用法

scoped原理:

scoped:css样式只能用于当前vue组件。

scoped实现原理:通过postCss实现,给组件中所有的dom元素添加唯一的动态属性。给css选择器添加一个属性选择器。这样做是使样式只作用于该属性的dom元素。

scoped缺点 :如果你子组件的根元素上有一个类已经在这个父组件中定义过了,那么这个父组件的样式就会泄露到子组件中。

scoped穿透: sass和less 使用 外层 /deep/ 第三方组件样式

stylus使用 外层 >>> 第三方组件样式

scoped穿透缺点失去了组件的封装效果 。这个组件内的所有的 .title 类的样式都会被这些样式所浸染---即便是孙节点。

使用scope和module的区别?

scoped样式可能会收到全局样式影响,

module样式不会受到全局样式影响。

scoped的效果是对元素加上data属性,但是可能会受到全局样式的影响。

module经过css-loader会对类名进行编译,添加上hash值等,所以无需担心和其他页面的同样的类名冲突,也可以避免全局样式被污染。

其实两种方案都非常简单、易用,在某种程度上解决的是同样的问题。 那么你该选择哪种呢?

scoped 样式的使用不需要额外的知识,给人舒适的感觉。它所存在的局限,也正是它的使用简单的原因。它可以用于支持小型到中型的应用。

在更大的应用或更复杂的场景中,这个时候,对于 CSS 的运用,我们就会希望它更加显式,拥有更多的控制权。虽然在模板中大量使用 $style 看起来并不那么"性感",但却更加安全和灵活,为此我们只需付出微小的代价。

module好处

它的第一点好处就是,当我们在 HMTL 中查看这个元素时我们可以立刻知道它所属的是哪个组件;第二点好处是,一切都变成显式的了,我们拥有了彻底的控制权------不会再有什么奇怪的现象了。

复制代码
//scoped:
<style>//生成style样式
.button[data-v-f61kqi1] {color: red;}
</style><button class="button" data-v-f61kqi1></button>

//module:
<template><button :class="$style.button" />
</template><style module>.button {color: red}
</style>
//生成html和style样式
<style>.ComponentName__button__2Kxy {color: red;}
</style><button class="ComponentName__button__2Kxy"></button> 
相关推荐
可子是我的小猫3 分钟前
【JS】模块(一)
javascript
跟橙姐学代码11 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_12 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13715 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌15 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_18 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模22 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖25 分钟前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing25 分钟前
代码共享方案-多仓库合并单仓库
前端
RaidenLiu27 分钟前
Riverpod 3:重建控制的实践与性能优化指南
前端·flutter