详解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 相关文章推荐
prototype class详解
Sep 07 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JS中递归函数
Jun 17 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python单例模式实例解析
2018/08/28 Python
设置python3为默认python的方法
2018/10/31 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
什么是Python中的匿名函数
2020/06/02 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
关于Java String的一道面试题
2013/09/29 面试题
高三家长寄语
2014/04/03 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
SpringBoot生成License的实现示例
2021/06/16 Java/Android
聊聊Python String型列表求最值的问题
2022/01/18 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫