scoped 和 deep的用法深究

前言

我們都知道在元件中給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>

deep

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

.father-div /deep/ .child-div

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

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屬性，相當於實現了樣式的模組化。二 ...