详解vue 中 scoped 样式作用域的规则


Posted in Javascript onSeptember 14, 2020

哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的,可以让你更清晰的了解你的项目样式是怎么运作的。

先来说说实现方式

vue中的样式作用域是通过属性选择器来实现的,例如同样一个类名,我们是通过 .类名[属性名] 来做区分的,我们这里主要是要搞清楚这里的属性名是怎么分配的。

样式作用域规则

接下来我们分情况来说一下样式作用域:

对于有样式作用域的组件,该组件的所有后代元素都会具备一个相同的作用域属性,而该组件的内部的根元素除了具备当前组件作用域属性也会具备其父级组件的作用域,当然如果父级没有作用域则不具备对于没有样式作用域的组件,如果父组件是有作用域的,那么该组件只有根元素会继承父组价的作用域,其后代的元素不会有作用域对于处在同一层次的组件,其作用域是相同的,从下一代开始才会有所区别特别要注意的是对于组件的复用,在当前项目,不管是什么层级,复用的组件作用域都相同

样式作用域图示

详解vue 中 scoped 样式作用域的规则

实际应用效果

有了基本的样式作用域知识储备之后,接下来我们来看一下 vue 最终会怎么将这些样式作用域应用到选择器的。

对于单个的选择器 .box[data-v-abc] 对于复合选择器:.box a[data-v-abc] .box[data-v-abc],.wrap[data-v-abc] .box > div[data-v-abc]

根据上面的知识储备,我们就知道,如果组件都只被引用一次,通常是不存在样式干扰的,但是如果一个组件在一个页面中复用多次,依然是有样式干扰的可能。

PS:下面看下vue中scoped的原理

vue中scoped的作用:

实现组件的私有化, 当前style属性只属于当前模块.

但是当我们使用公共组件的时候会造成很多困难.

scoped的实现原理:

在DOM结构中可以发现,vue通过在DOM结构以及css样式上加了唯一标记,达到样式私有化,不污染全局的作用,

详解vue 中 scoped 样式作用域的规则

详解vue 中 scoped 样式作用域的规则

可以看出,加上scoped后的组件里的会多 data-v-5db9451a 属性, css样式中可以看出;

1. 给DOM节点加一个不重复属性 data-v-5db9451a 标志唯一性.

2. 使每个样式选择器后添加类似于"不重复属性"的字段, 类似于作用域的作用,不影响全局.

3. 如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件.

谨慎使用:

1. 父组件无scoped属性,子组件带有scoped,父组件是无法操作子组件的.

2.父组件有scoped属性,子组件无scoped.父组件也无法设置子组件样式.因为父组件的所有标签都会带有data-v-5db9451a唯一标志,但子组件不会带有这个唯一标志属性.

3.父子组建都有,同理也无法设置样式,更改起来增加代码量.

总结

到此这篇关于vue 中 scoped 样式作用域的规则的文章就介绍到这了,更多相关vue scoped 样式作用域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
JS中递归函数
Jun 17 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
详解JavaScript 高阶函数
Sep 14 #Javascript
vue实现简单计算商品价格
Sep 14 #Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 #Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
swiper自定义分页器的样式
Sep 14 #Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 #Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 #Javascript
You might like
PHP 万年历实现代码
2012/10/18 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP文件操作方法汇总
2015/07/01 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Jquery ui css framework
2010/06/28 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python 画出来六维图
2019/07/26 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python 的topk算法实例
2020/04/02 Python
python 从list中随机取值的方法
2020/11/16 Python
python 如何引入协程和原理分析
2020/11/30 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
2014年酒店工作总结范文
2014/11/17 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis