Vue Scoped 詳細解釋

之前一直很困擾css的作用域問題，即使是模組化程式設計下，在對應的模組的js中import css進來，這個css仍然是全域性的。導致在css中需要加上對應模組的html的id/class 使用css選擇器保證css的作用域不會變成全域性而被其它模組的css汙染。

在vue中引入了scoped這個概念，scoped的設計思想就是讓當前元件的樣式不會修改到其它地方的樣式，使用了data-v-hash的方式來使css有了它對應模組的標識，這樣寫css的時候不需要加太多額外的選擇器，方便很多。

但是要注意scoped的作用域，因為權重的問題，如果是在子元件使用了scoped，那麼在父元件中是不能直接修改子元件的樣式的，需要在父元件中使用vue的深度作用選擇器。

.parent >>> .children
.parent /deep/ .children

在覆蓋類似iview第三方元件庫樣式的時候發現乙個問題，就是無法覆蓋元件原有的樣式，最後找到了答案：不要使用scoped屬性。

我們假設把這種元件叫做模組私有元件，其他的未加scoped的叫做模組一般元件。通過檢視dom結構發現：vue通過在dom結構以及css樣式上加唯一不重複的標記，以保證唯一，達到樣式私有化模組化的目的。

使用了巢狀規則)

#valueslide

.bigslider .ivu-slider-bar

.bigslider .ivu-slider-button

}//html部分

也就是我們在style中使用scoped屬性會出現下面的情況：

html部分：

css部分：

從上面的字可以看出，新增了scoped屬性的元件，為了達到元件樣式模組化，做了兩個處理：

那麼問題來了：對於當前元件下呼叫的其他元件，data屬性只會新增到第一層html中：

對於我們想覆蓋的樣式則無法起到作用：（在瀏覽器除錯中手動新增 [data-v-19fca230] 屬性後可以匹配）

解決方案：

不使用scoped屬性，更多詳細介紹可以參考這篇文章

總結一下scoped三條渲染規則：

1、給html的dom節點加乙個不重複data屬性(形如：data-v-19fca230)來表示他的唯一性

2、在每句css選擇器的末尾（編譯後的生成的css語句）加乙個當前元件的data屬性選擇器（如[data-v-19fca230]）來私有化樣式

3、如果元件內部包含有其他元件，只會給其他元件的最外層標籤加上當前元件的data屬性

問題補充：

1、如果不使用scoped，如何解決樣式全域性汙染？

推薦使用scoped推動元件私有化，文章所提到的不使用僅出現在已有ui庫的樣式覆蓋上（當然人家用了scoped那就很難辦了）。

首先，解決元件樣式全域性汙染，也就是我們在這裡不使用scoped覆蓋了樣式，那麼我們在其他地方呼叫該元件就會被覆蓋。那麼我們在使用元件的時候對元件給乙個類名或者其他甄別屬性（id），覆蓋樣式就針對該類名進行重寫樣式。

其次，解決其他樣式全域性汙染，如果我們通過：

引進樣式，那麼不使用scoped，"./test.less"中的其他類名樣式可能會汙染全域性，我這裡用乙個比較笨的方法處理：在模板中使用兩次標籤：

這樣既覆蓋了樣式，其他樣式不會被覆蓋到全域性（但是元件庫改寫的呢個樣式確實是寫到全域性中去了，怎麼處理呢？最好在對應的選擇器前加上個唯一的id這樣相當於在全域性中寫了對應元件庫的樣式，但是由於id選擇器的原因導致只有當前的這個元件下的第三方元件庫某個元件的樣式是被改寫了），既解決樣式問題，又不會影響其他頁面（雖然在全域性但是有id限制），感興趣的同學可以自己試一試。（注意兩個標籤的順序）

Vue Scoped 詳細解釋

pragma詳細解釋

mmap詳細解釋

TableView詳細解釋

Vue Scoped 詳細解釋

pragma詳細解釋

mmap詳細解釋

TableView詳細解釋

相關推薦