何為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屬性，而通過給vue組件的根元素加個id來區分不同組件。這種方法既實現了類似於scoped的效果，又方便修改各種第三方組件的樣式，代碼看起來也相對舒適。