详解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 相关文章推荐
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php 引用(&)详解
2009/11/20 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
PHP模块化安装教程
2016/06/01 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
js实现翻牌小游戏
2020/07/31 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
对python多线程与global变量详解
2018/11/09 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Python中有几个关键字
2020/06/04 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
工作的心得体会
2013/12/31 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
社区活动邀请函范文
2014/01/29 职场文书
房屋租赁意向书
2014/04/01 职场文书
经典导游欢迎词
2015/01/26 职场文书
社区植树节活动总结
2015/02/06 职场文书
内勤岗位职责
2015/02/10 职场文书
跑吧孩子观后感
2015/06/10 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
vue实现简单数据双向绑定
2021/04/28 Vue.js