在vue檔案中的style標籤上，有乙個特殊的屬性：scoped。當乙個style標籤擁有scoped屬性時，它的css樣式就只能作用於當前的元件，也就是說，該樣式只能適用於當前元件元素。通過該屬性，可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了scoped，相當於實現了樣式的模組化。
vue中的scoped屬性的效果主要通過postcss轉譯實現，如下是轉譯前的vue**：
hi
hi
scoped看起來很美，但是，在很多專案中，會出現這麼一種情況，即：引用了第三方元件，需要在元件中區域性修改第三方元件的樣式，而又不想去除scoped屬性造成元件之間的樣式汙染。此時只能通過特殊的方式，穿透scoped。
>>>其實，還擁有一種曲線救國的方法，即在定義乙個含有scoped屬性的style標籤之外，再定義乙個不含有scoped屬性的style標籤，即在乙個vue元件中定義乙個全域性的style標籤，乙個含有作用域的style標籤：
以上兩種方法，穿透方法實際上違反了scoped屬性的意義，曲線救國的方法又使得**太過於難看。
個人推薦第三種方法，即：由於scoped看起來很美好，但是含有很多的坑，所以，不推薦不使用scoped屬性，而通過在外層dom上新增唯一的class來區分不同元件。這種方法既實現了類似於scoped的效果，又方便修改各種第三方元件的樣式，**看起來也相對舒適。
更多專業前端知識，請上
【猿2048】www.mk2048.com
Vue中的scoped及穿透方法
在vue檔案中的style標籤上，有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時，它的css樣式就只能作用於當前的元件，也就是說，該樣式只能適用於當前元件元素。通過該屬性，可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了scoped，相當於實...
Vue中的scoped和scoped穿透
文章摘自 一 什麼是scoped 在vue檔案中的style標籤上有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的vue元件，可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性，相當於實現了樣式的模組化。二 ...
vue單檔案中scoped樣式如何穿透？
在vue檔案中的style標籤上，有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時，它的css樣式就只能作用於當前的元件，也就是說，該樣式只能適用於當前元件元素。通過該屬性，可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了scoped，相當於實...