如何使用Vue scoped和deep

這篇文章主要為大家展示了如何使用Vue scoped和deep，內(nèi)容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

眾所周知，在組件中給style 標簽添加屬性 scoped 屬性可以避免組件內(nèi)樣式對外界造成污染，scoped使得組件內(nèi)的樣式變成局域樣式，只作用于當前組件。

原理如下-------

在編譯組件的時候，如果當前組件內(nèi)style標簽上有scoped屬性，那么會在當前所有標簽上添加一個【data-v-hash】屬性，而當前樣式表內(nèi)的所有末尾選擇器后面也會加上該屬性，那么就使得當前組件內(nèi)的樣式只會作用于當前組件內(nèi)的元素。值得注意的是,當父組件，子組件同時使用scoped屬性時，子組件最外層的標簽既會被加上當前組件的hash值，又會加上父級組件的hash值,像這樣

//子組件最外層標簽
<div data-v-b45036b2 data-v-384b136e ></div>

但是有個問題------

在我們用scoped的時候回發(fā)現(xiàn)一個問題，就是我們在當前組件內(nèi)使用的scoped，但是我想在當前組件內(nèi)改變子組件的樣式(非最外層標簽)，的時候會發(fā)現(xiàn)不好使。

<style scoped>
.father-div .child-div{color:red;}
</style>

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

<div data-v-384b136e ></div>　

不好使的原因是應(yīng)為父組件內(nèi)樣式內(nèi)解析的是父組件的hash值，而子組件內(nèi)標簽上添加的是子組件的hash值，對應(yīng)不上當然沒效果，那怎么解決呢？

使用deep------

當遇到這種困擾的時候我們可以另寫一個style標簽，然后不加scoped屬性，來蓋子組件的樣式，當前這么寫是可以的，但是不太優(yōu)雅，這時我們可以用到/deep/屬性，

.father-div /deep/ .child-div{color:red;}

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

.father-div[data-v-b45036b2] .child-div{color:red;}

這樣只需要注意css的權(quán)重就可以覆蓋子組件內(nèi)的樣式了，

注意：子組件內(nèi)最外層的樣式由于是帶了父子組件的兩個hash值，所以是會被兩頭控制的，不需要/deep/就可以在父組件內(nèi)覆蓋樣式

以上就是關(guān)于如何使用Vue scoped和deep的內(nèi)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。