浅谈关于.vue文件中的style的scoped属性
注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响。
1、在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度。
一、创建公共组件button:
//button.vue <template> <div class="button-warp"> <button class="button">text</button> </div> </template> ... <style scoped> .button-warp{ display:inline-block; } .button{ padding: 5px 10px; font-size: 12px; border-radus: 2px; } </style>
浏览器渲染后的button组件为:
<div data-v-2311c06a class="button-warp"> <button data-v-2311c06a class="button">text</button> </div> .button-warp[data-v-2311c06a]{ display:inline-block; } .button[data-v-2311c06a]{ padding: 5px 10px; font-size: 12px; border-radus: 2px; }
从上面的结果可以看出,添加了scoped属性的组件,做了如下操作:
(1)、给HTML的DOM节点增加一个不重复的data属性。(如:data-v-2311c06a)
(2)、在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如:data-v-2311c06a)来私有化样式。
二、在 " 不使用 " scoped的组件中引用button组件:
//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>
浏览器渲染出来的结果是:
<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> /*button.vue渲染出来的css*/ .button-warp[data-v-2311c06a]{ display:inline-block; } .button[data-v-2311c06a]{ 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-radius属性,但是由于权重关系,生效的依然是组件内部的样式(即.button[data-v-2311c06a]定义的样式), 如果此时仍需修改样式,则鼻血加重我们需要修改的样式的权重。
三、在 " 使用 " scoped的组件中引用button组件:
//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; } .content .button{ border-raduis: 5px; } </style>
浏览器渲染的结果是:
<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> /*button.vue渲染出来的css*/ .button-warp[data-v-2311c06a]{ display:inline-block; } .button[data-v-2311c06a]{ padding: 5px 10px; font-size: 12px; border-radus: 2px; } /*content.vue渲染出来的css*/ .content[data-v-57bc25a0]{ width: 1200px; margin: 0 auto; } .content .button[data-v-57bc25a0]{ border-raduis: 5px; }
虽然,我们在content添加了scoped属性,但是.content .button 这句末尾添加的是content的scoped标记,最后我们实际上是找不到向对应的DOM节点的,也就不起作用啦。
解决办法:
在content.vue文件中添加两个style样式:
//content.vue <template> <div class="content"> <p class="title"></p> <!-- v-button假设是上面定义的组件 --> <v-button></v-button> </div> </template> ... <style scoped> //针对content组件内部的样式 .content{ width: 1200px; margin: 0 auto; } </style> <style> //针对公共组件的样式 .content .button{ border-raduis: 5px !important; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]
- 庄锭欣 ELKIE《没有你的未来》[FLAC/分轨][36MB]
- TchaikovskySwanLake,Op.20柴可夫斯基天鹅湖(2013)SACD[Hi-Res]
- 24bit达人艺典《琴歌终极版》整轨WAV+CUE
- 黑鸭子.2005-《发烧DSD》柏菲[WAV分轨]
- 群星.1990-电影看板·人间道【宝丽金】【WAV+CUE】
- 周殷廷.2024-TO.WHOM.IT.MAY.CONCERN【环球】【FLAC分轨】
- 草蜢.1997-三人世界精选17首【宝丽金】【WAV+CUE】
- 【古琴音乐】管平湖《广陵散》2004[FLAC+CUE]
- 【中国民乐】《少数民族器乐·苗岭的早晨》2004[WAV+CUE]