Vue 組件間的樣式?jīng)_突污染
一、污染是如何產(chǎn)生的?
得益于 Vue-loader,在 Vue 中可以使用類似于 Web Component 的組件化寫法, <template></template><style></style><script></script> ,在大多數(shù)情況下,我們希望組件間定義的樣式是相互隔離的,在 Weex 當(dāng)中的確如此,組件天生隔離,可是在 Vue 當(dāng)中,運(yùn)行的載體還是瀏覽器,所有的樣式類還是會(huì)通過(guò) style 標(biāo)簽插入頭部,影響全局,交叉污染
二、增加 Scoped 標(biāo)識(shí)
依然是 Vue-loader,通過(guò)為組件中的 style 標(biāo)簽增加一個(gè) scoped 標(biāo)識(shí),Vue-loader 在編譯的過(guò)程中會(huì)為組件每一個(gè)元素節(jié)點(diǎn)增加 scopeId 作為屬性,同時(shí)為所有的樣式類加上屬性選擇器 scopeId,從而達(dá)到隔離的效果,大概是下面的樣子:
每個(gè)組件有唯一的 scopeId,按理說(shuō),這樣應(yīng)該能夠做到樣式隔離了,實(shí)際上, 這種方式其實(shí)表現(xiàn)已經(jīng)足夠好了,除了以下這種情況~~
三、ScopeId 的繼承
我們把上面的例子再完善下:
// 父組件
<template>
<div>
<div class="bg"></div>
<Sub></Sub>
</div>
</template>
<script>
import Sub from './sub';
export default {
components: { Sub }
};
</script>
<style scoped>
.bg {
background-color: #000;
width: 100px;
height: 100px;
}
</style>
// 子組件
<template>
<div class="bg">
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
.bg {
width: 300px;
height: 300px;
margin-top: 5px;
}
</style>
由于我們使用了 scoped 標(biāo)識(shí)進(jìn)行樣式隔離,子組件的 div 不應(yīng)該有任何背景顏色,可是現(xiàn)實(shí)總在狠狠的打臉~~

不知道你的媚眼看到問(wèn)題的所在了沒(méi):
子元素的 根元素 會(huì)繼承父元素的 ScopeId!
子元素的 根元素 會(huì)繼承父元素的 ScopeId!
子元素的 根元素 會(huì)繼承父元素的 ScopeId?。ㄕf(shuō)了三遍的話,肯定很重要)
由于子元素的 根元素 除了擁有自己的 ScopeId 屬性,還繼承了父元素的 ScopeId 屬性,所以父元素的樣式類 bg 對(duì)其依然有效
四、怎么破?
破解的方式也很簡(jiǎn)單,為每一個(gè)組件的根元素提供一個(gè)另類一點(diǎn)的樣式名(如果有的話),例如就不要每個(gè)組件都命名為:wrap,根據(jù)業(yè)務(wù)名為:b1-wrap、b2-wrap 等
組件中的非根元素,類名不管怎么命名,怎么重名,都是不會(huì)發(fā)生污染的,這個(gè)自己領(lǐng)悟~~
五、這應(yīng)當(dāng)屬于 Vue-loader 的一個(gè) bug
沒(méi)錯(cuò),這應(yīng)該是一個(gè) bug,如果是我應(yīng)該會(huì)怎么解呢,編譯的時(shí)候不是增加屬性,而是直接根據(jù) scopeId 修改類名,嘿嘿~~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能
這篇文章主要介紹了vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能,本文通過(guò)實(shí)例代碼給大介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10
解決vue-cli 打包后自定義動(dòng)畫未執(zhí)行的問(wèn)題
今天小編就為大家分享一篇解決vue-cli 打包后自定義動(dòng)畫未執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue_drf實(shí)現(xiàn)短信驗(yàn)證碼
我們?cè)谧鼍W(wǎng)站開(kāi)發(fā)時(shí),登錄頁(yè)面很多情況下是可以用手機(jī)號(hào)接收短信驗(yàn)證碼,本文主要介紹了vue_drf實(shí)現(xiàn)短信驗(yàn)證碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
MAC+PyCharm+Flask+Vue.js搭建系統(tǒng)
最近新做了個(gè)項(xiàng)目,使用的是MAC+PyCharm+Flask+Vue.js搭建系統(tǒng),本文就來(lái)分享一下搭建步驟,感興趣的可以了解一下2021-05-05
Vue組件Draggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue組件Draggable實(shí)現(xiàn)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12

