今天在覆蓋iview元件樣式的時候發現乙個問題，就是無法覆蓋元件原有的樣式，最後在github的issue中找到了答案： 不要使用scoped屬性。於是我查詢了下關於scoped的文章。
我們假設把這種元件叫做模組私有元件，其他的未加scoped的叫做模組一般元件。通過檢視dom結構發現：vue通過在dom結構以及css樣式上加唯一不重複的標記，以保證唯一，達到樣式私有化模組化的目的。**如下：
使用了巢狀規則)
#valueslide
.bigslider .ivu-slider-bar
.bigslider .ivu-slider-button
}//html部分"valid-panel">
"containerbox">
"valueslide" v-bind:style="validstyle">
複製**
css部分：
從上面的字可以看出，新增了scoped屬性的元件，為了達到元件樣式模組化，做了兩個處理：
那麼問題來了：對於當前元件下呼叫的其他元件，data屬性只會新增到第一層html中：
對於我們想覆蓋的樣式則無法起到作用：（在瀏覽器除錯中手動新增 [data-v-19fca230] 屬性後可以匹配）
解決方案：不使用scoped屬性，更多詳細介紹可以參考這篇文章
總結一下scoped三條渲染規則：
問題補充：1.如果不使用scoped如何解決樣式全域性汙染？ 推薦使用scoped推動元件私有化，文章所提到的不使用僅出現在已有ui庫的樣式覆蓋上（當然人家用了scoped那就很難辦了）。 首先，解決元件樣式全域性汙染，也就是我們在這裡不使用scoped覆蓋了樣式，那麼我們在其他地方呼叫該元件就會被覆蓋。那麼我們在使用元件的時候對元件給乙個類名或者其他甄別屬性（id），覆蓋樣式就針對該類名進行重寫樣式。 其次，解決其他樣式全域性汙染，如果我們通過：
複製**scoped，"./test.less"中的其他類名樣式可能會汙染全域性，我這裡用乙個比較笨的方法處理：在模板中使用兩次複製**官網 vue-loader 中提到每個vue模板中可以有多個標籤，所以上面的寫法是沒有問題的。
Vue中的scoped和scoped穿透
文章摘自 一 什麼是scoped 在vue檔案中的style標籤上有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的vue元件，可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性，相當於實現了樣式的模組化。二 ...
vue中scoped的原理
實現元件的私有化，不對全域性造成樣式汙染，表示當前style屬性只屬於當前模 塊 實現原理 通過觀察dom結構可以發現 vue通過在dom結構以及css樣式上加上唯一的標記，保證唯一，達到樣式私有化，不汙染全域性的作用，如圖，樣式屬性上也會多乙個該字元，以保證唯一 可以看出加上scoped後的元件裡...
vue 中 scoped 的原理
之前寫vue頁面的時候，使用的是 快捷方式，打出vue之後使用tab鍵，就可以快捷的建立出vue頁面的template，script和style，之前一直有注意到style中有乙個scoped的屬性，但是一直不知道是幹啥的。今天乙個前輩給我講了，所以記錄下來，以供日後複習。實現組建的私有化，不對全域...