哈嘍！大家好！我是木瓜太香，今天我們來聊一個 vue 的樣式作用域的問題，通常我們開發專案的時候是要在 style 上加上 scoped 來起到規定組件作用域的效果的，所以了解他們的規則也是很有必要的，可以讓你更清晰的了解你的專案樣式是怎么運作的，
先來說說實作方式
vue中的樣式作用域是通過屬性選擇器來實作的，例如同樣一個類名，我們是通過 .類名[屬性名] 來做區分的，我們這里主要是要搞清楚這里的屬性名是怎么分配的，
樣式作用域規則
接下來我們分情況來說一下樣式作用域：
- 對于有樣式作用域的組件，該組件的所有后代元素都會具備一個相同的作用域屬性，而該組件的內部的根元素除了具備當前組件作用域屬性也會具備其父級組件的作用域，當然如果父級沒有作用域則不具備
- 對于沒有樣式作用域的組件，如果父組件是有作用域的，那么該組件只有根元素會繼承父組價的作用域，其后代的元素不會有作用域
- 對于處在同一層次的組件，其作用域是相同的，從下一代開始才會有所區別
- 特別要注意的是對于組件的復用，在當前專案，不管是什么層級，復用的組件作用域都相同
樣式作用域圖示
實際應用效果
有了基本的樣式作用域知識儲備之后，接下來我們來看一下 vue 最侄訓怎么將這些樣式作用域應用到選擇器的，
對于單個的選擇器 .box[data-v-abc] 對于復合選擇器：.box a[data-v-abc] .box[data-v-abc],.wrap[data-v-abc] .box > div[data-v-abc]
根據上面的知識儲備，我們就知道，如果組件都只被參考一次，通常是不存在樣式干擾的，但是如果一個組件在一個頁面中復用多次，依然是有樣式干擾的可能，
有前端問題需要討論的可以加我的qun:237871108，也可以通過嗶哩嗶哩搜索木瓜太香找到我，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/16250.html
標籤：JavaScript
上一篇：零基礎如何自學web前端開發?
下一篇：深拷貝學習筆記