vue scoped 穿透vue 修改內部組件樣式

來自專欄前端MVVM三劍客

樣式的模塊化

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

scoped的實現原理

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

<style scoped>.aa { color: red;}</style> <template> <div class="aa">hi</div></template>

轉譯後：

<style>.aa[data-v-255588312333a] { color: red;}</style> <template> <div class="aa" data-v-255588312333a>hi</div></template>

為什麼需要穿透scoped？

scoped看起來很美，但是，在很多項目中，會出現這麼一種情況，即：引用了第三方組件，比如，taro-ui , element-ui, iview等等 需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過特殊的方式，穿透scoped。

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

通過 >>> 可以使得在使用scoped屬性的情況下，穿透scoped，修改其他引入組件的值

多個style解決問題

即在定義一個含有scoped屬性的style標籤之外，再定義一個不含有scoped屬性的style標籤，即在一個vue組件中定義一個全局的style標籤，一個含有作用域的style標籤：

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

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

不使用scoped時

當然，我們可以在引入每個組件的外層DOM上添加一個CLASS樣式，來鎖定每一個組件的樣式作用域。也類似於scoped的效果。又方便修改各種第三方組件的樣式

總結：

方法一:

穿透方法實際上違反了scoped屬性的使用意義

方法二：

也一樣違反了scoped屬性的使用意義

推薦閱讀：