樣式穿透vue中的scoped詳談

2022-07-15 22:01:38

前言

我們平常在開發過程中特別是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樣式穿透的資料請關注it145.com其它相關文章！

樣式穿透vue中的scoped詳談

目錄

前言

scoped的使命與作用

scoped的副作用

樣式穿透（::v-deep）

總結

熱門文章