前言

我們平常在開(kāi)發(fā)過(guò)程中特別是Vue技術(shù)棧的前端同學(xué)們，經(jīng)常會(huì)用到一些UI組件庫(kù)，特別是element-ui使用的頻率是比較高的，我們經(jīng)常會(huì)修改這些UI組件庫(kù)的默認(rèn)樣式時(shí)會(huì)使用到深度選擇器，大家都知道這么做，有沒(méi)有想過(guò)為什么？趁著疫情在家于是研究了一下，在這里分享一下

scoped的使命與作用

這里用vue做了一個(gè)demo,兩個(gè)頁(yè)面，一個(gè)頁(yè)面中是掘金的a標(biāo)簽，一個(gè)頁(yè)面是vue的a標(biāo)簽,我們一起看下scoped的作用,給其中一個(gè)頁(yè)面的a標(biāo)簽加上紅色，另外一個(gè)沒(méi)有加任何樣式，并且沒(méi)有在style中使用scoped，如下圖

答案大家應(yīng)該都知道，沒(méi)錯(cuò)！兩個(gè)頁(yè)面中的鏈接文字都變成了紅色，當(dāng)我們點(diǎn)擊juejin這個(gè)頁(yè)面的時(shí)候，瀏覽器會(huì)自動(dòng)引入當(dāng)前頁(yè)面的樣式，再去點(diǎn)擊github時(shí)瀏覽器會(huì)復(fù)用這個(gè)樣式，所以a鏈接的顏色都會(huì)變紅，因?yàn)閂ue是單頁(yè)面應(yīng)用，所以我們打開(kāi)的每一個(gè)頁(yè)面的樣式都會(huì)被夾在成全局的樣式，解決辦法就是加上scoped,這時(shí)a標(biāo)簽的顏色就不同了，我們打開(kāi)頁(yè)面看下a標(biāo)簽(下圖)

這時(shí)候的a標(biāo)簽多了一個(gè)data-v-xxxxxxx這個(gè)東西，這個(gè)就是Vue替我們加上的， Vue在構(gòu)建構(gòu)建這個(gè)項(xiàng)目的時(shí)候會(huì)提我們以組件單位，不同的組件下所有的元素都會(huì)加上同一個(gè)類似組件ID的東西，同時(shí)會(huì)在我們寫的樣式上以屬性選擇器的方式拼接上這個(gè)唯一標(biāo)識(shí)，我們來(lái)驗(yàn)證一下，（下圖）

對(duì)的，我們加上scoped之后Vue會(huì)在這段樣式的最后一段加上這個(gè)屬性，然后通過(guò)屬性選擇器選中這個(gè)元素，從而實(shí)現(xiàn)元素樣式的隔離，接下來(lái)我們一起看下scoped的副作用

scoped的副作用

這時(shí)我們引入element-ui驗(yàn)證一下scoped的副作用，這里寫了一個(gè)demo(下圖)，這里也使用了scoped

我們檢查一下元素(下圖)

注意這里的input元素是沒(méi)有例如data-v-xxxxxx的唯一標(biāo)識(shí)的但是我們自己寫的樣式（my-Txt input）在被構(gòu)建之后是什么樣子的呢？(下圖)

如上圖所示，我們自己寫的樣式卻被拼接了這個(gè)唯一的標(biāo)識(shí)，所以我們?cè)僭趺床僮饕彩菦](méi)法命中這個(gè)元素的，也就是說(shuō)Vue并沒(méi)有給這個(gè)input加上這個(gè)標(biāo)識(shí)，但是卻在我們的樣式中加上了這個(gè)標(biāo)識(shí)，但是我們?nèi)绻裺coped去掉，那么就能命中目標(biāo)，但是這樣我們是不推薦的，樣式會(huì)被打包到統(tǒng)一的樣式中，這就是scoped的副作用，那我們?cè)趺唇鉀Q它呢？樣式穿透

樣式穿透（::v-deep）

我們現(xiàn)在就加上樣式穿透就可以命中目標(biāo)

<style scoped>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>

這時(shí)候我們看下構(gòu)建后的樣式Vue會(huì)怎么處理(下圖)

我們可以看到這個(gè)唯一標(biāo)識(shí)從input后面跑到了my-Txt的后面了，也就是說(shuō)我們不加入這個(gè)::v-deep,Vue永遠(yuǎn)都會(huì)把這個(gè)唯一的標(biāo)識(shí)拼接在我們寫的樣式的最后一段，如果我們想改變這個(gè)唯一標(biāo)識(shí)的位置，就需要你用樣式穿透來(lái)指定，那么上圖的意思就是帶有這個(gè)唯一標(biāo)識(shí)的my-Txt的元素，它的子元素中的input會(huì)應(yīng)用這個(gè)樣式，而我們寫的這個(gè)my-Txt也是具備這個(gè)唯一標(biāo)識(shí)的，從上面圖可以看到

總結(jié)

為了解決多頁(yè)面應(yīng)用中不同組件中的樣式隔離問(wèn)題，Vue引入了scoped樣式的概念，但是Vue不會(huì)把所有的元素都加上唯一標(biāo)識(shí)，導(dǎo)致我們沒(méi)辦法命中這個(gè)元素的時(shí)候，我們就要用樣式穿透來(lái)指定這個(gè)唯一辨識(shí)被拼接到css樣式的哪一段！??！

以上就是樣式穿透vue中的scoped的詳細(xì)內(nèi)容，更多關(guān)于vue scoped樣式穿透的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論