Vue中的scoped和scoped穿透

文章摘自：

一、什麼是scoped

在vue檔案中的style標籤上有乙個特殊的屬性：scoped。當乙個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的vue元件，可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性，相當於實現了樣式的模組化。

二、scoped實現原理

vue中的scoped屬性的效果主要是通過postcss實現的。以下是轉譯前的**:

測試案例

轉譯後:

.example[data-v-5558831a] 
scoped測試案例

既：postcss給乙個元件中的所有dom新增了乙個獨一無二的動態屬性，給css選擇器額外新增乙個對應的屬性選擇器，來選擇元件中的dom，這種做法使得樣式只作用於含有該屬性的dom元素(元件內部的dom)。

總結：scoped的渲染規則：

1、給html的dom節點新增乙個不重複的data屬性（例如: data-v-5558831a）來唯一標識這個dom元素。

2、在每句css選擇器的末尾（編譯後生成的css語句）加乙個當前元件的data屬性選擇器(例如：[data-v-5558831a])來私有化樣式。

三、scoped穿透

scoped看起來很好用，當時在vue專案中，當我們引入第三方元件庫時（如使用vue-awesome-swiper實現移動端輪播），需要在區域性元件中修改第三方元件庫的樣式，而又不想去除scoped屬性造成元件之間的樣式覆蓋。這時我們可以通過特殊的方式穿透scoped。

1、stylus的樣式穿透使用》

外層 >>> 第三方元件 
樣式 background: #fff

2、sass和less的樣式穿透使用/deep/

外層 /deep/ 第三方元件 
background: #fff;
}

四、在元件中修改第三方元件庫樣式的其它方法

上面我們介紹了在使用scoped屬性時，通過scopd穿透的方式修改引入第三方元件庫樣式的方法，下面我們介紹其它方式來修改引入第三方元件庫的樣式。包括如下幾種方式：

1、在vue元件中不使用scoped屬性。

2、在vue元件中使用兩個style標籤，乙個加上scoped屬性，乙個不加scoped屬性，把需要覆蓋的css樣式寫在不加scoped屬性的style標籤裡。

3、建立乙個reset.css(基礎全域性樣式)檔案，裡面寫覆蓋的css樣式，在入口檔案main.js中引入。