默認情況下寫在組件中的樣式會 全局生效 → 因此很容易造成多個組件之間的樣式?jīng)_突問題。

1. 全局樣式: 默認組件中的樣式會作用到全局，任何一個組件中都會受到此樣式的影響

2. 局部樣式: 可以給組件加上scoped 屬性,可以讓樣式只作用于當前組件

一、代碼示例

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
/* 1.style中的樣式 默認是作用到全局的2.加上scoped可以讓樣式變成局部樣式組件都應該有獨立的樣式，推薦加scoped（原理）-----------------------------------------------------scoped原理：1.給當前組件模板的所有元素，都會添加上一個自定義屬性：data-v-hash值data-v-5f6a9d56  用于區(qū)分開不同的組件2.css選擇器后面，被自動處理，添加上了屬性選擇器div[data-v-5f6a9d56]
*/
div{border: 3px solid blue;margin: 30px;
}
</style>

BaseTwo.vue

<template><div class="base-one">BaseTwo</div>
</template><script>
export default {}
</script><style scoped>div{border: 3px solid red;margin: 30px;}
</style>

App.vue

<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

二、scoped原理

1. 當前組件內標簽都被添加data-v-hash值 的屬性
2. css選擇器都被添加 [data-v-hash值] 的屬性選擇器

最終效果: 必須是當前組件的元素, 才會有這個自定義屬性, 才會被這個樣式作用到