<code>之前一直只知道在Vue單文件中的style標籤中添加上scoped屬性可以實現組件的私有化，不對全局造成樣式汙染，表示當前style屬性只屬於當前模
塊；但是一直不知道具體如何實現的，直到最近看了大佬們的文章才明白。/<code>
什麼是 scoped
scoped 是Vue單頁面文件中
其原理其實很簡單，只要加上了 scoped，當前文件所有元素（不包括調用的其他組件）都會加上一串識別碼，樣式只作用於帶碼的元素。
舉個簡單例子：
<code><template>
<childcomponent>
/<template>
<style><br> .money {<br> width: 90px;<br> }<br>/<style>/<code>
如上面所說，加上了 scoped 後，渲染時這個組件所有元素都會加上 data-v-xxxxx 這樣的屬性。Vue 用戶應該經常會在調試的時候見到類似這樣的結構：
<code>/<code>
然後在 style 也會加上對應的屬性選擇器：
<code>.money[data-v-9bfd234a] {
width: 90px;
}/<code>這樣結果就很明確了，加了 scoped 之後所有選擇器後面都加上一個屬性選擇器來限制選擇，結果就是隻應用在當前組件。
<code>/<code>
如果是子組件的話就會是上面的情況，子組件裡面的元素不會被打上 9bfd234a 標誌，但是當然，如果子組件本身也用了 scoped，當然會有另一個 data-v- 標籤，不過隨機生成的 id 是不同的，所以不會互相干擾。
分享到:
閱讀更多 從小勵志當全棧 的文章
