Vue 組件間的樣式?jīng)_突污染

更新時(shí)間：2017年08月31日 09:25:49 作者：小蟲巨蟹

本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個(gè)樣式出現(xiàn)時(shí)，就會(huì)導(dǎo)致樣式?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í)總在狠狠的打臉~~