哈嘍！大家好！我是木瓜太香，今天我們來聊一個 vue 的樣式作用域的問題，通常我們開發專案的時候是要在 style 上加上 scoped 來起到規定元件作用域的效果的，所以瞭解他們的規則也是很有必要的，可以讓你更清晰的瞭解你的專案樣式是怎麼運作的。

先來說說實現方式

vue中的樣式作用域是通過屬性選擇器來實現的，例如同樣一個類名，我們是通過 .類名[屬性名] 來做區分的，我們這裡主要是要搞清楚這裡的屬性名是怎麼分配的。

樣式作用域規則

接下來我們分情況來說一下樣式作用域：

對於有樣式作用域的元件，該元件的所有後代元素都會具備一個相同的作用域屬性，而該元件的內部的根元素除了具備當前元件作用域屬性也會具備其父級元件的作用域，當然如果父級沒有作用域則不具備對於沒有樣式作用域的元件，如果父元件是有作用域的，那麼該元件只有根元素會繼承父組價的作用域，其後代的元素不會有作用域對於處在同一層次的元件，其作用域是相同的，從下一代開始才會有所區別特別要注意的是對於元件的複用，在當前專案，不管是什麼層級，複用的元件作用域都相同

樣式作用域圖示

實際應用效果

有了基本的樣式作用域知識儲備之後，接下來我們來看一下 vue 最終會怎麼將這些樣式作用域應用到選擇器的。

對於單個的選擇器 .box[data-v-abc] 對於複合選擇器：.box a[data-v-abc] .box[data-v-abc],.wrap[data-v-abc] .box > div[data-v-abc]

根據上面的知識儲備，我們就知道，如果元件都只被引用一次，通常是不存在樣式干擾的，但是如果一個元件在一個頁面中複用多次，依然是有樣式干擾的可能。

PS：下面看下vue中scoped的原理

vue中scoped的作用:

　　實現元件的私有化,當前style屬性只屬於當前模組.

　　但是當我們使用公共元件的時候會造成很多困難.

scoped的實現原理:

　　在DOM結構中可以發現,vue通過在DOM結構以及css樣式上加了唯一標記,達到樣式私有化,不汙染全域性的作用,

　　可以看出,加上scoped後的元件裡的會多 data-v-5db9451a 屬性,css樣式中可以看出;

　　1. 給DOM節點加一個不重複屬性 data-v-5db9451a 標誌唯一性.

　　2. 使每個樣式選擇器後新增類似於"不重複屬性"的欄位,類似於作用域的作用,不影響全域性.

　　3. 如果元件內部還有元件,只會給最外層的元件裡的標籤加上唯一屬性欄位,不影響元件內部引用的元件.

謹慎使用:

　　1. 父元件無scoped屬性,子元件帶有scoped,父元件是無法操作子元件的.

　　2.父元件有scoped屬性,子元件無scoped.父元件也無法設定子元件樣式.因為父元件的所有標籤都會帶有data-v-5db9451a唯一標誌，但子元件不會帶有這個唯一標誌屬性.

　　3.父子組建都有，同理也無法設定樣式，更改起來增加程式碼量.

總結

到此這篇關於vue 中 scoped 樣式作用域的規則的文章就介紹到這了,更多相關vue scoped 樣式作用域內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！