樣式穿透vue中的scoped詳談

Posted on by

前言

我們平常在開發過程中特別是Vue技術棧的前端同學們，經常會用到一些UI組件庫，特別是element-ui使用的頻率是比較高的，我們經常會修改這些UI組件庫的默認樣式時會使用到深度選擇器，大傢都知道這麼做，有沒有想過為什麼？趁著疫情在傢於是研究瞭一下，在這裡分享一下

scoped的使命與作用

這裡用vue做瞭一個demo,兩個頁面，一個頁面中是掘金的a標簽，一個頁面是vue的a標簽,我們一起看下scoped的作用,給其中一個頁面的a標簽加上紅色，另外一個沒有加任何樣式，並且沒有在style中使用scoped，如下圖

答案大傢應該都知道，沒錯！兩個頁面中的鏈接文字都變成瞭紅色，當我們點擊juejin這個頁面的時候，瀏覽器會自動引入當前頁面的樣式，再去點擊github時瀏覽器會復用這個樣式，所以a鏈接的顏色都會變紅，因為Vue是單頁面應用，所以我們打開的每一個頁面的樣式都會被夾在成全局的樣式，解決辦法就是加上scoped,這時a標簽的顏色就不同瞭，我們打開頁面看下a標簽(下圖)

這時候的a標簽多瞭一個data-v-xxxxxxx這個東西，這個就是Vue替我們加上的， Vue在構建構建這個項目的時候會提我們以組件單位，不同的組件下所有的元素都會加上同一個類似組件ID的東西，同時會在我們寫的樣式上以屬性選擇器的方式拼接上這個唯一標識，我們來驗證一下，（下圖）

對的，我們加上scoped之後Vue會在這段樣式的最後一段加上這個屬性，然後通過屬性選擇器選中這個元素，從而實現元素樣式的隔離，接下來我們一起看下scoped的副作用

scoped的副作用

這時我們引入element-ui驗證一下scoped的副作用，這裡寫瞭一個demo(下圖)，這裡也使用瞭scoped

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

註意這裡的input元素是沒有例如data-v-xxxxxx的唯一標識的但是我們自己寫的樣式（my-Txt input）在被構建之後是什麼樣子的呢？(下圖)

如上圖所示，我們自己寫的樣式卻被拼接瞭這個唯一的標識，所以我們再怎麼操作也是沒法命中這個元素的，也就是說Vue並沒有給這個input加上這個標識，但是卻在我們的樣式中加上瞭這個標識，但是我們如果把scoped去掉，那麼就能命中目標，但是這樣我們是不推薦的，樣式會被打包到統一的樣式中，這就是scoped的副作用，那我們怎麼解決它呢？樣式穿透

樣式穿透（::v-deep）

我們現在就加上樣式穿透就可以命中目標

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

這時候我們看下構建後的樣式Vue會怎麼處理(下圖)

我們可以看到這個唯一標識從input後面跑到瞭my-Txt的後面瞭，也就是說我們不加入這個::v-deep,Vue永遠都會把這個唯一的標識拼接在我們寫的樣式的最後一段，如果我們想改變這個唯一標識的位置，就需要你用樣式穿透來指定，那麼上圖的意思就是帶有這個唯一標識的my-Txt的元素，它的子元素中的input會應用這個樣式，而我們寫的這個my-Txt也是具備這個唯一標識的，從上面圖可以看到

總結

為瞭解決多頁面應用中不同組件中的樣式隔離問題，Vue引入瞭scoped樣式的概念，但是Vue不會把所有的元素都加上唯一標識，導致我們沒辦法命中這個元素的時候，我們就要用樣式穿透來指定這個唯一辨識被拼接到css樣式的哪一段！！！

以上就是樣式穿透vue中的scoped的詳細內容，更多關於vue scoped樣式穿透的資料請關註WalkonNet其它相關文章！

推薦閱讀：