快捷導(dǎo)航

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

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

本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個樣式出現(xiàn)時，就會導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法

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

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

二、增加 Scoped 標(biāo)識

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

每個組件有唯一的 scopeId，按理說，這樣應(yīng)該能夠做到樣式隔離了，實際上，這種方式其實表現(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)識進(jìn)行樣式隔離，子組件的 div 不應(yīng)該有任何背景顏色，可是現(xiàn)實總在狠狠的打臉~~