.vue文件 加scoped 樣式不起作用的解決方法
淺談關(guān)于.vue文件中的style的scoped屬性
注意:scoped作用:使得.vue中的樣式不影響其他.vue組件樣式,而不是scoped使得.vue組件樣式不受外樣式影響。
1、在vue組件中,為了使樣式私有化(模塊化),不對(duì)全局造成污染,在style標(biāo)簽上添加scoped屬性,以表示它只屬于當(dāng)下的模塊。但是要慎用,因?yàn)樵谖覀冃枰薷墓步M件(第三方庫或者項(xiàng)目中定制的組件)的樣式的時(shí)候,scoped會(huì)造成很多困難,組要增加額外的復(fù)雜度。
一、創(chuàng)建公共組件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; }
從上面的結(jié)果可以看出,添加了scoped屬性的組件,做了如下操作:
(1)、給HTML的DOM節(jié)點(diǎn)增加一個(gè)不重復(fù)的data屬性。(如:data-v-2311c06a)
(2)、在每句css選擇器的末尾(編譯后生成的css語句)加一個(gè)當(dāng)前組件的data屬性選擇器(如:data-v-2311c06a)來私有化樣式。
二、在 " 不使用 " scoped的組件中引用button組件:
//content.vue <template> <div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的公共組件 --> <v-button></v-button> </div> </template> ... <style> .content{ width: 1200px; margin: 0 auto; } .content .button{ border-raduis: 5px; } </style>
瀏覽器渲染出來的結(jié)果是:
<div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的組件 --> <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屬性,但是由于權(quán)重關(guān)系,生效的依然是組件內(nèi)部的樣式(即.button[data-v-2311c06a]定義的樣式), 如果此時(shí)仍需修改樣式,則鼻血加重我們需要修改的樣式的權(quán)重。
三、在 " 使用 " scoped的組件中引用button組件:
//content.vue <template> <div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的公共組件 --> <v-button></v-button> </div> </template> ... <style scoped> .content{ width: 1200px; margin: 0 auto; } .content .button{ border-raduis: 5px; } </style>
瀏覽器渲染的結(jié)果是:
<div data-v-57bc25a0 class="content"> <p data-v-57bc25a0 class="title"></p> <!-- v-button假設(shè)是上面定義的組件 --> <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; }
雖然,我們?cè)赾ontent添加了scoped屬性,但是.content .button 這句末尾添加的是content的scoped標(biāo)記,最后我們實(shí)際上是找不到向?qū)?yīng)的DOM節(jié)點(diǎn)的,也就不起作用啦。
解決辦法:
在content.vue文件中添加兩個(gè)style樣式:
//content.vue <template> <div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的組件 --> <v-button></v-button> </div> </template> ... <style scoped> //針對(duì)content組件內(nèi)部的樣式 .content{ width: 1200px; margin: 0 auto; } </style> <style> //針對(duì)公共組件的樣式 .content .button{ border-raduis: 5px !important; } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中transition組件在項(xiàng)目中運(yùn)用小結(jié)
這篇文章主要介紹了vue中transition組件在項(xiàng)目中運(yùn)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue和uniapp頁面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部
這篇文章主要介紹了vue和uniapp頁面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Vue router動(dòng)態(tài)路由實(shí)現(xiàn)過程
Vue動(dòng)態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下2023-03-03Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法
這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法,需要的朋友可以參考下2018-05-05