style标签上的scoped属性
vue中
在vue文件中的style标签上有一个特殊的属性:scoped(布尔值);
<style scoped>
</style>
作用
该属性的作用是将当前标签下的样式私有化,仅对当前组件起作用
- 只管当前组件和子组件的最外层(不控制自组件)
原理
若是给style标签添加了scoped属性,在编译时
- 给当前组件和子组件的最外层的dom节点添加一个不重复的data自定义属性(例如: data-v-5558831a)来 唯一 标识这个dom 元素;
- 在每个css选择器中添加一个当前组件的data属性选择器(例如:[data-v-5558831a])来私有化样式
- 使得组件中的样式互不干扰;
缺点
虽然这样做保证样式只对当前组件起作用,不造成全局污染,但是于此同时
在我们使用第三方插件(eg:vant)的时候,想要修改其中的样式时—>若是我们写在带有scoped的style中时,默认会在选择器上加一个属性,这样就修改不到子元素的身上(无法修改子组件的样式);
解决
[1]解决1—使用穿透 ::v-deep
/deep/
----存在兼容性(vue3打包的时候会报错)>>>
—存在兼容性问题(scss使用会报错)::v-deep
—兼容性最好;
原理 :去掉了该标签的属性选择器;
[2]解决2—在同一组件写两个style标签
- 一个加scoped只管当前页面;
- 一个不加scoped处理修改子组件样式的问题;
举例
//在登录组件中使用vant的导航栏(自带padding,我们不需要,想要去掉)<template><div class="login"><!-- 导航栏 --><van-nav-bar><template #left><span class="iconfont icon44"></span></template></van-nav-bar></div></template>
//使用穿透(本来不能修改子组件的样式,只要在选择器加上 ::v-deep 就可以修改了)<style lang='less' scoped>::v-deep .van-nav-bar__left,::v-deep .van-nav-bar__right {padding: 0;}}
uni-app
在使用uni-app时我们使用的是.vue文件进行代码编写的,style标签也存在coped属性
原理
在uni-app中添加scoped属性之后,在编译时
- 给当前组件和子组件的最外层的dom节点添加一个不重复的data自定义类名来 唯一 标识这个dom 元素;
- 在每个css选择器中添加一个当前组件的data类名来私有化样式,使得组件中的样式互不干扰;
添加时机
在uni-app中我们需要给每一个组件添加scoped属性吗?
答案是不需要的,因为在vue中在打包时会将所有的样式打包到一个css文件中;而在uni-app中会将每个页面打包到一个单独的wxss文件中,因此这样已经保证了该文件的样式不被其他文件干扰了;
若是我们抽离组件,要是不想当前组件中的样式被影响可以添加scoped属性。
style标签上的scoped属性相关推荐
- 超链接href属性_如何使用标签上的HREF属性制作HTML超链接
超链接href属性 A website is a collection of web pages. And these pages need to be linked or connected by ...
- 标签上的 title属性与 alt属性的区别
1.含义不同 alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明 2.在浏览器中的表现不同 在firefox(火狐浏览器)和ie8中,当鼠标经过图片时title值会显示,而alt的 ...
- style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
- vue中慎用style的scoped属性
" 在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制.但是为什么要慎用呢?在实际业务中我们往往会对公 ...
- style 标签属性 scoped 的作用和原理
在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性,对于这个 scoped 属性的了解做一下介绍. 1.作用 当 style 标签里面有 scoped 属性时,它的css只 ...
- vue中style scoped属性的作用和原理以及scoped穿透
一.为什么要给style 节点加 scoped 属性(vue) 1.作用:当style标签里面有scoped属性时,它的css只作用于当前组建的元素.在单页面项目中可以使组件之间互不污染,实现模块化( ...
- 【Vue基础】关于Vue中CSS的scoped属性作用域与样式穿透
scoped 在了解scoped属性之前,先了解一下Vue(中的插件)在渲染DOM时干了什么.Vue在渲染DOM后会在DOM节点上生成一个随机串data属性,这一属性给了当前组件下的DOM一种唯一标识 ...
- scoped 属性的小知识
1.什么是scoped属性 scoped 属性是 style 标签上的一个特殊属性(布尔值).表示当前style 里的样式只属于当前模块.(作用域.私有化的思想) 2.为什么会有这个属性 关于css的 ...
- 【项目小tips】scoped属性的使用
项目场景: 在做Vue项目的过程中,想要更改Element-ui中轮播图按钮的样式,发现按钮样式只能放在style中,如果放在style scoped中就不会生效. 问题描述 <style> ...
最新文章
- go get报错unrecognized import path “golang.org/x/net/context”…
- 安徽大学大一高数第二章习题册答案
- html文件url_for加载静态文件
- Anaconda日志
- var s=+newDate();的用法,表示对应的时间截
- poi导入excel日期处理_poi解析excel读取日期为数字的问题
- Transformers Assemble(PART IV)
- 文档在线编辑组件的发展回顾与开发集成选择问题
- 编写可靠Linux shell脚本的建议
- 分层架构中各层之间关系如何界定,期待大家来讨论
- 友华PT939G移动光猫开启telnet获取配置文件
- 哈工大车万翔教授:ACL 2010-2020研究趋势总结
- 数理统计基础 统计量
- BZOJ 3039 玉蟾宫
- Wilcoxon符号秩检验
- 专访清华裘捷中:亚洲高校首个KDD最佳博士论文奖是如何炼成的?
- shell脚本——sed详细介绍(包含应用案例)
- 文件名称重命名后,一键恢复的技巧
- sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)
- 天猫用户重复购买预测——特征工程
热门文章
- [linux] linux shuf 和 mac gshuf
- zk 有一个节点报 It is probably not running且日志无明显报错
- python bitwise operator 位运算
- 零信任态势评估:CIS安全控制内容与实施
- 怎样在excel中通过出生日期计算年龄
- Nginx 实战-负载均衡
- 知识图谱构建——D2R的使用(二)
- 2020年笔记本电脑计算机专业,适合女生用的笔记本电脑排名2020
- 数论[计算机数学专题(5)]
- C++ Reference: Standard C++ Library reference: C Library: cstdio: stdout