何為scoped？

在vue文件中的style標(biāo)簽上，有一個(gè)特殊的屬性：scoped。當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)，它的CSS樣式就只能作用于當(dāng)前的組件，也就是說(shuō)，該樣式只能適用于當(dāng)前組件元素。通過(guò)該屬性，可以使得組件之間的樣式不互相污染。如果一個(gè)項(xiàng)目中的所有style標(biāo)簽全部加上了scoped，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化。

scoped的實(shí)現(xiàn)原理

vue中的scoped屬性的效果主要通過(guò)PostCSS轉(zhuǎn)譯實(shí)現(xiàn)，如下是轉(zhuǎn)譯前的vue代碼：

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

轉(zhuǎn)譯后：

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

即：PostCSS給一個(gè)組件中的所有dom添加了一個(gè)獨(dú)一無(wú)二的動(dòng)態(tài)屬性，然后，給CSS選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器來(lái)選擇該組件中dom，這種做法使得樣式只作用于含有該屬性的dom——組件內(nèi)部dom。

為什么需要穿透scoped？

scoped看起來(lái)很美，但是，在很多項(xiàng)目中，會(huì)出現(xiàn)這么一種情況，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時(shí)只能通過(guò)特殊的方式，穿透scoped。

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

通過(guò) >>> 可以使得在使用scoped屬性的情況下，穿透scoped，修改其他組件的值。

曲線救國(guó)的方法

其實(shí)，還擁有一種曲線救國(guó)的方法，即在定義一個(gè)含有scoped屬性的style標(biāo)簽之外，再定義一個(gè)不含有scoped屬性的style標(biāo)簽，即在一個(gè)vue組件中定義一個(gè)全局的style標(biāo)簽，一個(gè)含有作用域的style標(biāo)簽：

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

此時(shí)，你只需要將修改第三方樣式的css寫(xiě)在第一個(gè)style中即可。

個(gè)人推薦的方法

以上兩種方法，穿透方法實(shí)際上違反了scoped屬性的意義，曲線救國(guó)的方法又使得代碼太過(guò)于難看。

個(gè)人推薦第三種方法，即：由于scoped看起來(lái)很美好，但是含有很多的坑，所以，不推薦不使用scoped屬性，而通過(guò)在外層dom上添加唯一的class來(lái)區(qū)分不同組件。這種方法既實(shí)現(xiàn)了類(lèi)似于scoped的效果，又方便修改各種第三方組件的樣式，代碼看起來(lái)也相對(duì)舒適。

總結(jié)

以上所述是小編給大家介紹的Vue中的scoped實(shí)現(xiàn)原理及穿透方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！