一、污染是如何產(chǎn)生的？

創(chuàng)新互聯(lián)建站專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、巫溪網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、html5、商城網(wǎng)站定制開發(fā)、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為巫溪等各大城市提供網(wǎng)站開發(fā)制作服務。

得益于 Vue-loader，在 Vue 中可以使用類似于 Web Component 的組件化寫法, ，在大多數(shù)情況下，我們希望組件間定義的樣式是相互隔離的，在 Weex 當中的確如此，組件天生隔離，可是在 Vue 當中，運行的載體還是瀏覽器，所有的樣式類還是會通過 style 標簽插入頭部，影響全局，交叉污染

二、增加 Scoped 標識

依然是 Vue-loader，通過為組件中的 style 標簽增加一個 scoped 標識，Vue-loader 在編譯的過程中會為組件每一個元素節(jié)點增加 scopeId 作為屬性，同時為所有的樣式類加上屬性選擇器 scopeId，從而達到隔離的效果，大概是下面的樣子：

每個組件有唯一的 scopeId，按理說，這樣應該能夠做到樣式隔離了，實際上， 這種方式其實表現(xiàn)已經(jīng)足夠好了，除了以下這種情況~~

三、ScopeId 的繼承

我們把上面的例子再完善下：

// 父組件




// 子組件

由于我們使用了 scoped 標識進行樣式隔離，子組件的 div 不應該有任何背景顏色，可是現(xiàn)實總在狠狠的打臉~~

不知道你的媚眼看到問題的所在了沒：

子元素的 根元素 會繼承父元素的 ScopeId！

子元素的 根元素 會繼承父元素的 ScopeId！

子元素的 根元素 會繼承父元素的 ScopeId！（說了三遍的話，肯定很重要）

由于子元素的 根元素 除了擁有自己的 ScopeId 屬性，還繼承了父元素的 ScopeId 屬性，所以父元素的樣式類 bg 對其依然有效

四、怎么破？

破解的方式也很簡單，為每一個組件的根元素提供一個另類一點的樣式名（如果有的話），例如就不要每個組件都命名為：wrap，根據(jù)業(yè)務名為：b1-wrap、b2-wrap 等

組件中的非根元素，類名不管怎么命名，怎么重名，都是不會發(fā)生污染的，這個自己領悟~~

五、這應當屬于 Vue-loader 的一個 bug

沒錯，這應該是一個 bug，如果是我應該會怎么解呢，編譯的時候不是增加屬性，而是直接根據(jù) scopeId 修改類名，嘿嘿~~

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。