在
vue組件中我們我們經(jīng)常需要給style添加scoped來使得當前樣式只作用于當前組件的節(jié)點懈费。添加scoped之后萌焰，實際上vue在背后做的工作是將當前組件的節(jié)點添加一個像data-v-1233這樣唯一屬性的標識堪旧，當然也會給當前style的所有樣式添加[data-v-1233]這樣的話缺前，就可以使得當前樣式只作用于當前組件的節(jié)點。但是 我們需要注意的是：如果我們添加了子組件乎串，同樣的历恐，如果子組件也用
scoped標識了荸恕，那么在父組件中是不能設(shè)置子組件中的節(jié)點的樣式角寸。若父組件有scoped菩混，子組件沒有設(shè)置，同樣袭厂，也是不能在父組件中設(shè)置子組件的節(jié)點的樣式的墨吓，因為父組件用了scoped,那么父組件中style設(shè)置的樣式都是唯一的了，不會作用與其他的組件樣式纹磺。如果想讓每個組件中都有一個公共的
.page類，是必須在App.vue中設(shè)置的亮曹，App.vue相當于根容器橄杨，不設(shè)置scoped秘症。所以一般在App.vue中引用公共樣式。另外值得注意的一點是式矫，如果使用了
less,sass 的@mixin乡摹，然后做了一個 .minin.scss的公共文件，是不能單獨放在App.vue中的采转，每個使用了的組件都需要單獨引入聪廉。
App.vue
<style lang="scss">
// 不加scoped
// 公共樣式放在這里
@import 'src/css/common';
// @import 'src/css/mixin'; 這個不能單獨放在這里
// ...
</style>
感謝瀏覽，歡迎評論指正故慈，相互學習板熊，轉(zhuǎn)載請標明出處。
