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> 
相关推荐
蚂蚁RichLab前端团队20 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光20 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军20 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql52020 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy20 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days205020 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端20 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿20 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL21 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉21 小时前
Vue组件化开发介绍
前端·javascript·vue.js