一、汙染是如何產生的？
得益於 vue-loader，在 vue 中可以使用類似於 web component 的元件化寫法,，在大多數情況下，我們希望元件間定義的樣式是相互隔離的，在 weex 當中的確如此，元件天生隔離，可是在 vue 當中，執行的載體還是瀏覽器，所有的樣式類還是會通過 style 標籤插入頭部，影響全域性，交叉汙染
二、增加 scoped 標識
依然是 vue-loader，通過為元件中的 style 標籤增加乙個 scoped 標識，vue-loader 在編譯的過程中會為元件每乙個元素節點增加 scopeid 作為屬性，同時為所有的樣式類加上屬lpzlibhq性選擇器 scopeid，從而達到隔離的效果，大概是下面的樣子：
每個元件有唯一的 scopeid，按理說，這樣應該能夠做到樣式隔離了，實際上， 這種方式其實表現已經足夠好了除了以下這種情況~~
三、scopeid 的繼承
我們把上面的例子再完善下：
// 父元件
程式設計客棧gt;
&l>
lpzlibhqyle scoped>
.bg
// 子元件
由於我們使用了 scoped 標識進行樣式隔離，子元件的 div 不應該有任何背景顏色，可是現實總在狠狠的打臉~~
不知道你的媚眼看到問題的所在了沒：
子元素的 根元素 會繼承父元素的 scopeid！
子元素的 根元素 會繼承父元素的 scopeid！
子元素的 根元素 會繼承父元素的 scopeid！（說了三遍的話，肯定很重要）
由於子元素的 根元素 除了擁有自己的 scopeid 屬性，還繼承了父元素的 scopeid 屬性，所以父元素的樣式類 bg 對其依然有效
四、怎麼破？
破解的方式也很簡單，為每乙個元件的根元素提供乙個另類一點的樣式名（如果有的話），例如就不要每個元件都命名為：wrap，根據業務名為：b1-wrap、b2-wrap 等
元件中的非根元素，類名不管怎麼命名，怎麼重名，都是不會發生汙染的，這個自己領悟~~
五、這應當屬於 vue-loader 的乙個 bug
沒錯，這應該是乙個 bug，如果是我應該會怎麼解呢，編譯的時候不是增加屬性，而是直接根據 scopeid 修改類名，嘿嘿~~
本文標題: vue 元件間的樣式衝突汙染
本文位址:
Vue 元件間的樣式處理 scoped
關於 vue 元件間的樣式問題，一直困擾我。父與子，子與父，兄弟元件間相互的樣式汙染，再加上 scoped 作用域的作用，導致我們很難搞清楚之間的相互關係，今天我們就來一 竟 父元件 子元件 通過現象可以看到，父元件的樣式覆蓋了子元件的樣式 但是為什麼會這樣呢？按照我的理解，每個 vue 元件都有自...
Vue的樣式衝突
scoped vue loader，使 vue 可以使用類似於 web component 的元件化寫法,並且為元件中的 style 標籤增加乙個 scoped 標識。vue loader 在編譯的過程中會為元件每乙個元素節點增加 scopeid 作為屬性，同時為所有的樣式類加上屬性選擇器 scop...
Vue元件間的通訊
1 父子元件之間的通訊 a 父 子 父元件傳遞資料給子元件 使用props b 子 父 在父元件上呼叫子元件內定義的方法 使用ref c 子 父 父元件獲取子元件內的資料 使用ref d 子 父 子元件內觸發事件，父元件監聽事件 使用 emit 可以把看成是乙個普通的html元素，註冊了dialog...