眾所周知，在組件中給style 標(biāo)簽添加屬性 scoped 屬性可以避免組件內(nèi)樣式對外界造成污染，scoped使得組件內(nèi)的樣式變成局域樣式，只作用于當(dāng)前組件。

原理如下-------

在編譯組件的時候，如果當(dāng)前組件內(nèi)style標(biāo)簽上有scoped屬性，那么會在當(dāng)前所有標(biāo)簽上添加一個【data-v-hash】屬性，而當(dāng)前樣式表內(nèi)的所有末尾選擇器后面也會加上該屬性，那么就使得當(dāng)前組件內(nèi)的樣式只會作用于當(dāng)前組件內(nèi)的元素。值得注意的是,當(dāng)父組件，子組件同時使用scoped屬性時，子組件最外層的標(biāo)簽既會被加上當(dāng)前組件的hash值，又會加上父級組件的hash值,像這樣

//子組件最外層標(biāo)簽
<div data-v-b45036b2 data-v-384b136e ></div>

但是有個問題------

在我們用scoped的時候回發(fā)現(xiàn)一個問題，就是我們在當(dāng)前組件內(nèi)使用的scoped，但是我想在當(dāng)前組件內(nèi)改變子組件的樣式(非最外層標(biāo)簽)，的時候會發(fā)現(xiàn)不好使。

<style scoped>
.father-div .child-div{color:red;}
</style>

因為到了瀏覽器上會解析成

<div data-v-384b136e ></div>　

不好使的原因是應(yīng)為父組件內(nèi)樣式內(nèi)解析的是父組件的hash值，而子組件內(nèi)標(biāo)簽上添加的是子組件的hash值，對應(yīng)不上當(dāng)然沒效果，那怎么解決呢？

使用deep------

當(dāng)遇到這種困擾的時候我們可以另寫一個style標(biāo)簽，然后不加scoped屬性，來蓋子組件的樣式，當(dāng)前這么寫是可以的，但是不太優(yōu)雅，這時我們可以用到/deep/屬性，

.father-div /deep/ .child-div{color:red;}

當(dāng)遇到"/deep/"的時候會將"/deep/"的位置替換成組件的hash值,解析成

.father-div[data-v-b45036b2] .child-div{color:red;}

這樣只需要注意css的權(quán)重就可以覆蓋子組件內(nèi)的樣式了，

注意：子組件內(nèi)最外層的樣式由于是帶了父子組件的兩個hash值，所以是會被兩頭控制的，不需要/deep/就可以在父組件內(nèi)覆蓋樣式

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論