樣式穿透vue中的scoped詳談

更新時間：2022年07月15日 16:29:36 作者：麥芒

這篇文章主要為大家介紹了樣式穿透vue中的scoped示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

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

scoped的使命與作用

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

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

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

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

scoped的副作用

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

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

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

如上圖所示，我們自己寫的樣式卻被拼接了這個唯一的標識，所以我們再怎么操作也是沒法命中這個元素的，也就是說Vue并沒有給這個input加上這個標識，但是卻在我們的樣式中加上了這個標識，但是我們?nèi)绻裺coped去掉，那么就能命中目標，但是這樣我們是不推薦的，樣式會被打包到統(tǒng)一的樣式中，這就是scoped的副作用，那我們怎么解決它呢？樣式穿透

樣式穿透（::v-deep）

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

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

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

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