详解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中暂停功能的实现代码
Mar 04 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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 xfocus防注入资料
2008/04/27 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
实例讲解php数据访问
2016/05/09 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
js 窗口抖动示例
2013/09/04 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
python查看列的唯一值方法
2018/07/17 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
电脑教师的自我评价
2013/12/18 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
自荐信如何制作?
2014/02/21 职场文书
2014年共青团工作总结
2014/12/10 职场文书
体检通知范文
2015/04/21 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python