详解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 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue+element实现表单校验功能
May 20 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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 Directory 函数的详解
2013/03/07 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python 除法小技巧
2008/09/06 Python
linux下安装easy_install的方法
2013/02/10 Python
python提取字典key列表的方法
2015/07/11 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python实现数值积分方式
2019/11/20 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
四风存在的原因分析
2014/02/11 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
生物学专业求职信
2014/07/23 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书