vue组件样式scoped
1.vue组件中的样式如果没加scrped,样式代表的是全局样式(避免组件之间样式的冲突)。加了属性代表是模块化的。
其他组件引用button组件
上面分析了单个组件渲染后的结果,那么组件互相调用之后会出现什么样的结果呢?,具体分两种情况:模块一般组件引用模块私有组件(本质和模块私有组件引用模块一般组件一样);模块私有组件引用模块私有组件。
举个例子:在组件content.vue中使用了button组件,那么content.vue组件是否添加scoped属性渲染出来的结果有什么区别呢?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//content.vue <template> <div class= "content" > <p class= "title" ></p> <!-- v-button假设是上面定义的组件 --> <v-button></v-button> </div> </template> ... <style> .content{ width: 1200px; margin: 0 auto; } .content .button{ border-raduis: 5px; } </style> |
模块一般组件(未添加scoped)引用模块私有组件
如果style上没有加scoped属性,那么渲染出来html和css分别就是:
1
2
3
4
5
6
7
|
< div class = "content" > < p class = "title" ></ p > <!-- v-button假设是上面定义的组件 --> < div data-v-2311c06a class = "button-warp" > < button data-v-2311c06a class = "button" >text</ button > </ div > </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/*button.vue渲染出来的css*/ .button-warp[data-v -2311 c 06 a]{ display :inline- block ; } .button[data-v -2311 c 06 a]{ padding : 5px 10px ; font-size : 12px ; border-radus: 2px ; } /*content.vue渲染出来的css*/ .content{ width : 1200px ; margin : 0 auto ; } .content .button{ border-raduis: 5px ; } |
可以看出,虽然在content组件中,修改了button的border-raduis属性,但是由于权重关系,生效的依然是组件内部的样式(此时是外部的样式被覆盖)。所以如果要达到修改样式的目的,就必须加重我们要修改样式的权重(增加选择器层级,ID选择器,并列选择器,impotant等)
模块私有组件(添加scoped)引用模块私有组件
如果加了scoped属性呢?按照开始分析出来的规则(事实也是这么的):
首先是在所有的DOM节点加上data属性
然后在css选择器尾部加上data属性选择器
那么渲染出来html和css分别就是:
1
2
3
4
5
6
7
|
< div data-v-57bc25a0 class = "content" > < p data-v-57bc25a0 class = "title" ></ p > <!-- v-button假设是上面定义的组件 --> < div data-v-57bc25a0 data-v-2311c06a class = "button-warp" > < button data-v-2311c06a class = "button" >text</ button > </ div > </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/*button.vue渲染出来的css*/ .button-warp[data-v -2311 c 06 a]{ display :inline- block ; } .button[data-v -2311 c 06 a]{ padding : 5px 10px ; font-size : 12px ; border-radus: 2px ; } /*content.vue渲染出来的css*/ .content[data-v -57 bc 25 a 0 ]{ width : 1200px ; margin : 0 auto ; } .content .button[data-v -57 bc 25 a 0 ]{ border-raduis: 5px ; } |
对于上面的两种情况,可以明显看出来渲染后的结果大不相同。
虽然我们在content添加了想要修改button组件的样式的代码,但是仔细看,由于.content .button这句在末尾加的是content组件的scoped标记,最后这句其实根本作用不到我们想要的DOM节点上,所以这种情况我们在content内部写的任何样式都不会影响到button.vue组件,所以这就尴尬了。。。。
当然这个问题也是可以解决的,就是直接加全局样式可以修改到,但这势必会影响全部地方的组件;所以需要另外一种方法在content.vue组件内再加一个不带scoped属性的style标签,也就意味着要加两个style,一个用于私有样式,一个用于共有样式。这肯定是有点shit的,并且这两种解决方案都回避不了一个问题:权重!!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//content.vue <template> <div class= "content" > <p class= "title" ></p> <!-- v-button假设是上面定义的组件 --> <v-button></v-button> </div> </template> ... <style scoped> .content{ width: 1200px; margin: 0 auto; } </style> <style> .content .button{ border-raduis: 5px; } </style> |
这样符合规范么?貌似没看到不能这么写,并且这么写也确实生效了。。。但这样确实增加了思维的复杂度,有点苦恼啊。
2.
总结一下scoped三条渲染规则
- 给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性
- 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式
- 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
vue组件样式scoped的更多相关文章
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- vue 组件样式如何不影响全局
可以在 "style" 标签中添加 "scoped" 属性. <style scoped> .red { color: #f00; } </s ...
- vue组件如何被其他项目引用
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...
- vue scoped 穿透_vue 修改内部组件样式问题
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- Vue中的scoped及穿透方法(修改第三方组件局部的样式)
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- Vue+element-ui 重置组件样式的写法
两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css' 方案2:每个.vu ...
- 在vue组件中style scoped中遇到的坑
在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...
随机推荐
- Nginx1.8源码包编译安装
1.下载解压Nginx,为方便管理下载包一般将下载包放在指定目录下 ,即/usr/local/src/下. wget http://nginx.org/download/nginx-1.8.0.tar ...
- 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_06.mybatis的环境搭建
创建实体类,实现Serializable接口 属性名和数据库的字段名保持一致 Date字段需要导入包 生成gettter和setter,再生成一个ToString的方法 创建持久层Dao 创建接口 里 ...
- 关于WordPress中字体加载慢的问题解决方案(转)
2016-04-15 最近发现Wordpress有时候加载的特别慢,于是就想办法找了下原因.之前听网上说是因为wordpress用的是Google的字体库,而且是每次都要加载,导致访问慢的,于是当时装 ...
- 安装iamp模块,编译报错configure: error: Cannot find imap library (libc-client.a). Please check your c-client installation.
yum install libc-client-devel cd /root/lnmp1.0-full/php-5.3.17/ext/imap /usr/local/php/bin/phpize ./ ...
- 【Linux开发】如何查看Linux kernel的内置模块驱动列表和进程ID
[Linux开发]如何查看Linux kernel的内置模块驱动列表和进程ID 标签:[Linux开发] 命令: cat /lib/modules/$(uname -r)/modules.builti ...
- oracle中与mysql中的命令 show databases, show tables, desc table类似的命令集
1 怎样执行一个sql脚本文件,这个脚本文件写了一系列的sql语句集,比如sql.sql 放在D:\MyEclipse 8.6\Workspaces\OASystem\WebRoot\sql.sql下 ...
- docker--docker 网络管理
9 docker 网络管理 9.1 默认网络 1.查看docker网络: docker network ls Docker中默认的三种网络分别为bridge.host和none,其中名为bridge的 ...
- 最全的DevOps自动化工具集合
版本控制&协作开发:GitHub.GitLab.BitBucket.SubVersion.Coding.Bazaar 自动化构建和测试:Apache Ant.Maven .Selenium.P ...
- java中的继承关系
1.定义 java中的继承是单一的,一个子类只能拥有一个父类:java中所有类的父类是java.lang.Object,除了这个类之外,每个类只能有一个父类: 而一个父类可以有多个子类,可以被多个子类 ...
- 关于Maven的安装和配置
1.Maven的介绍 1.Maven是一个项目管理工具(项目对象模型POM) 2.Maven可以管理项目中的jar包依赖 3.Maven的中央仓库地址 http://mvnrepository.com ...