vue组件的style标签里的scoped属性是什么作用?


<style lang="css" scoped> .container
{ color: red } </style>

开发一个项目会有多个css样式,全局的局部的,组件内的……各个组件之间可能会存在选择器重名的问题,一不小心可能会导致样式污染而使得项目的表现出现问题。而“scoped”这个属性就是为了使样式私有化,不至于让当前组件的css样式对全局造成污染。

scoped修饰的style只给当前组件的元素使用,是如何实现的呢?

原理是给渲染后的DOM元素增加一个唯一标志,类似于“data-v-123lsdfast23”,在css选择器上也有一个对应的相同标志,间接提升了样式的权重,使得样式更不容易被覆盖。

但是,这也会产生一些麻烦,scoped属性标志只能作用于DOM元素的最外层标签,所以父组件的样式不会渗透到子组件中去,可以使用scoped穿透来解决这个问题:

复制代码
 
/* 写法一,container为外层属性选择器名称,没有也可以不加 */
.container /deep/ .button
{ color: red; }
/* 写法二,可用于stylus */
.container >>> .button { color: red; }

复制代码

还学习到一种方案是将全局属性和局部属性分开处理,即:


<style>
/* global styles */ </style> <style scoped> /* local styles */ </style>

另外,动态生成的DOM类名可能在scoped中也不会有作用,这时可添加 /deep/ 来让样式生效。

posted @   学习学习学而时习  阅读(648)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示