這次帶給大家Vue中scoped實現原理及穿透使用步驟詳解，Vue中scoped實現原理及穿透使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
何為scoped？
在vue檔案中的style標籤上，有一個特殊的屬性：scoped。當一個style標籤擁有scoped屬性時，它的CSS樣式就只能作用於目前的組件，也就是說，該樣式只能適用於目前組件元素。透過此屬性，可以使得組件之間的樣式不互相污染。如果一個專案中的所有style標籤全部加上了scoped，相當於實作了樣式的模組化。
scoped的實現原理
vue中的scoped屬性的效果主要透過PostCSS轉譯實現，如下是轉譯前的vue程式碼：
<style scoped>
.example {
color: red;
}
</style>
<template>
<p class="example">hi</p>
</template>轉譯後：
<style>
.example[data-v-5558831a] {
color: red;
}
</style>
<template>
<p class="example" data-v-5558831a>hi</p>
</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屬性，而通過在外層dom上添加唯一的class來區分不同組件。這種方法既實現了類似scoped的效果，又方便修改各種第三方組件的樣式，程式碼看起來也相對舒適。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Vue中scoped實現原理及穿透使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
