scoped 和 deep的用法深究

2021-09-03 01:23:12 字數 1140 閱讀 4367

前言

我們都知道在元件中給style標籤新增scoped屬性可以避免元件內樣式對外界造成汙染,scoped使得元件內的樣式變成局域樣式,只作用於當前元件。這個是怎麼做到的呢?

原理在編譯元件的時候,如果當前元件內style標籤上有scoped屬性,那麼會在當前所有標籤上新增乙個【data-v-hash】屬性,而當前樣式表內的所有末尾選擇器後面也會加上該屬性,那麼久使得當前元件內的樣式只會作用於當前元件內的元素。

值得注意的是,當父元件,子元件同時使用scoped屬性時,子元件最外層的標籤既會被加上當前元件的hash值,又會加上父級元件的hash值,像這樣

//子元件最外層標籤

問題

在我們用scoped的時候回發現乙個問題,就是我們在當前元件內使用的scoped,但是我想在當前元件內改變子元件的樣式(非最外層標籤),的時候會發現不好使

scoped

>

.father-div .child-div

style

>

因為到了瀏覽器上會解析成

.father-div .child-div[data-v-b45036b2]

而標籤上是這樣的

data-v-384b136e

>

div>

不好使的原因是應為父元件內樣式內解析的是父元件的hash值,而子元件內標籤上新增的是子元件的hash值,對應不上當然沒效果,那怎麼解決呢?

deep

當遇到這種困擾的時候我們可以另寫乙個style標籤,然後不加scoped屬性,來蓋子元件的樣式,當前這麼寫是可以的,但是不太優雅,這時我們可以用到/deep/屬性,

.father-div /deep/ .child-div

當遇到"/deep/「的時候會將」/deep/"的位置替換成元件的hash值,解析成

.father-div[data-v-b45036b2] .child-div

這樣只需要注意css的權重就可以覆蓋子元件內的樣式了,

vue 中scoped 和 deep的用法深究

前言 我們都知道在元件中給style標籤新增scoped屬性可以避免元件內樣式對外界造成汙染,scoped使得元件內的樣式變成局域樣式,只作用於當前元件。這個是怎麼做到的呢?原理在編譯元件的時候,如果當前元件內style標籤上有scoped屬性,那麼會在當前所有標籤上新增乙個 data v hash...

VUE中的 deep 用法

前端滄海關注 2019.08.07 21 06 09字數 489閱讀 81 七夕了,寫個昨天遇到的bug來緩解下沒有人約的尷尬。昨天和qa過歷史bug時,發現有好幾個瀏覽器不相容的導致式樣變形的bug,調查了一番發現是因為deep選擇器的原因。在說bug之前,先看看vue官方是如何說明deep的用法...

Vue中的scoped和scoped穿透

文章摘自 一 什麼是scoped 在vue檔案中的style標籤上有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時候,它的css樣式只能用於當前的vue元件,可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性,相當於實現了樣式的模組化。二 ...