Vue Scoped 詳細解釋

2021-10-24 19:32:02 字數 2298 閱讀 7910

之前一直很困擾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限制),感興趣的同學可以自己試一試。(注意兩個標籤的順序)

pragma詳細解釋

pragma是預處理指令,它的作用是設定編譯器的狀態或者是指示編譯器完成一些特定的動作。pragma指 令對每個編譯器給出了乙個方法,在保持與c和c 語言完全相容的情況下,給出主機或作業系統專有的特徵。依據定義,編譯指示是機器或作業系統專有的,且對於每個編譯器都是不同的。其格式一般為 pragmap...

mmap詳細解釋

mmap系統呼叫並不是完全為了用於共享記憶體而設計的。它本身提供了不同於一般對普通檔案的訪問方式,程序可以像讀寫記憶體一樣對普通檔案的操作。而posix或系統v的共享記憶體ipc則純粹用於共享目的,當然mmap 實現共享記憶體也是其主要應用之一。mmap系統呼叫使得程序之間通過對映同乙個普通檔案實現...

TableView詳細解釋

建立 uitableview datatable uitableview alloc initwithframe cgrectmake 0,0,320,420 datatable setdelegate self datatable setdatasource self self.view adds...