vue中scoped的作用:
實現組件的私有化, 當前style屬性只屬於當前模塊.
但是當我們使用公共組件的時候會造成很多困難.
scoped的實現原理:
在DOM結構中可以發現,vue通過在DOM結構以及css樣式上加了唯一標記,達到樣式私有化,不污染全局的作用,
可以看出,加上scoped后的組件里的會多 data-v-5db9451a 屬性, css樣式中可以看出;
1. 給DOM節點加一個不重復屬性 data-v-5db9451a 標志唯一性.
2. 使每個樣式選擇器后添加類似於"不重復屬性"的字段, 類似於作用域的作用,不影響全局.
3. 如果組件內部還有組件,只會給最外層的組件里的標簽加上唯一屬性字段,不影響組件內部引用的組件.
謹慎使用:
1. 父組件無scoped屬性,子組件帶有scoped,父組件是無法操作子組件的.
2. 父組件有scoped屬性,子組件無scoped.父組件也無法設置子組件樣式.因為父組件的所有標簽都會帶有data-v-5db9451a唯一標志，但子組件不會帶有這個唯一標志屬性.
3. 父子組建都有，同理也無法設置樣式，更改起來增加代碼量.