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

原理如下-------

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

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

但是有個(gè)問題------

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

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

因?yàn)榈搅藶g覽器上會(huì)解析成

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

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

使用deep------

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

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

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

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

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

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

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

最新評(píng)論