Vue中的scoped及穿透方法

何爲scoped？

在vue文件中的style標籤上，有一個特殊的屬性：scoped。當一個style標籤擁有scoped屬性時，它的CSS樣式就只能做用於當前的組件，也就是說，該樣式只能適用於當前組件元素。經過該屬性，可使得組件之間的樣式不互相污染。若是一個項目中的全部style標籤所有加上了scoped，至關於實現了樣式的模塊化。

scoped的實現原理

vue中的scoped屬性的效果主要經過PostCSS轉譯實現，以下是轉譯前的vue代碼：

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

轉譯後：

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

即：PostCSS給一個組件中的全部dom添加了一個獨一無二的動態屬性，而後，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom，這種作法使得樣式只做用於含有該屬性的dom——組件內部dom。

爲何須要穿透scoped？

scoped看起來很美，可是，在不少項目中，會出現這麼一種狀況，即：引用了第三方組件，須要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性形成組件之間的樣式污染。此時只能經過特殊的方式，穿透scoped。

<style scoped>
    外層 >>> 第三方組件 {
        樣式
    }
</style>

經過 >>> 可使得在使用scoped屬性的狀況下，穿透scoped，修改其餘組件的值。

曲線救國的方法

其實，還擁有一種曲線救國的方法，即在定義一個含有scoped屬性的style標籤以外，再定義一個不含有scoped屬性的style標籤，即在一個vue組件中定義一個全局的style標籤，一個含有做用域的style標籤：

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

此時，你只須要將修改第三方樣式的css寫在第一個style中便可。

我的推薦的方法

以上兩種方法，穿透方法實際上違反了scoped屬性的意義，曲線救國的方法又使得代碼太過於難看。

我的推薦第三種方法，即：因爲scoped看起來很美好，可是含有不少的坑，因此，不推薦不使用scoped屬性，而經過在外層dom上添加惟一的class來區分不一樣組件。這種方法既實現了相似於scoped的效果，又方便修改各類第三方組件的樣式，代碼看起來也相對溫馨。