詳解vue 中 scoped 樣式作用域的規(guī)則
哈嘍！大家好！我是木瓜太香，今天我們來(lái)聊一個(gè) vue 的樣式作用域的問(wèn)題，通常我們開(kāi)發(fā)項(xiàng)目的時(shí)候是要在 style 上加上 scoped 來(lái)起到規(guī)定組件作用域的效果的，所以了解他們的規(guī)則也是很有必要的，可以讓你更清晰的了解你的項(xiàng)目樣式是怎么運(yùn)作的。
先來(lái)說(shuō)說(shuō)實(shí)現(xiàn)方式
vue中的樣式作用域是通過(guò)屬性選擇器來(lái)實(shí)現(xiàn)的，例如同樣一個(gè)類名，我們是通過(guò) .類名[屬性名] 來(lái)做區(qū)分的，我們這里主要是要搞清楚這里的屬性名是怎么分配的。
樣式作用域規(guī)則
接下來(lái)我們分情況來(lái)說(shuō)一下樣式作用域：
對(duì)于有樣式作用域的組件，該組件的所有后代元素都會(huì)具備一個(gè)相同的作用域?qū)傩裕摻M件的內(nèi)部的根元素除了具備當(dāng)前組件作用域?qū)傩砸矔?huì)具備其父級(jí)組件的作用域，當(dāng)然如果父級(jí)沒(méi)有作用域則不具備對(duì)于沒(méi)有樣式作用域的組件，如果父組件是有作用域的，那么該組件只有根元素會(huì)繼承父組價(jià)的作用域，其后代的元素不會(huì)有作用域?qū)τ谔幵谕粚哟蔚慕M件，其作用域是相同的，從下一代開(kāi)始才會(huì)有所區(qū)別特別要注意的是對(duì)于組件的復(fù)用，在當(dāng)前項(xiàng)目，不管是什么層級(jí)，復(fù)用的組件作用域都相同
樣式作用域圖示
實(shí)際應(yīng)用效果
有了基本的樣式作用域知識(shí)儲(chǔ)備之后，接下來(lái)我們來(lái)看一下 vue 最終會(huì)怎么將這些樣式作用域應(yīng)用到選擇器的。
對(duì)于單個(gè)的選擇器 .box[data-v-abc] 對(duì)于復(fù)合選擇器：.box a[data-v-abc] .box[data-v-abc],.wrap[data-v-abc] .box > div[data-v-abc]
根據(jù)上面的知識(shí)儲(chǔ)備，我們就知道，如果組件都只被引用一次，通常是不存在樣式干擾的，但是如果一個(gè)組件在一個(gè)頁(yè)面中復(fù)用多次，依然是有樣式干擾的可能。
PS：下面看下vue中scoped的原理
vue中scoped的作用:
實(shí)現(xiàn)組件的私有化, 當(dāng)前style屬性只屬于當(dāng)前模塊.
但是當(dāng)我們使用公共組件的時(shí)候會(huì)造成很多困難.
scoped的實(shí)現(xiàn)原理:
在DOM結(jié)構(gòu)中可以發(fā)現(xiàn),vue通過(guò)在DOM結(jié)構(gòu)以及css樣式上加了唯一標(biāo)記,達(dá)到樣式私有化,不污染全局的作用,
可以看出,加上scoped后的組件里的會(huì)多 data-v-5db9451a 屬性, css樣式中可以看出;
1. 給DOM節(jié)點(diǎn)加一個(gè)不重復(fù)屬性 data-v-5db9451a 標(biāo)志唯一性.
2. 使每個(gè)樣式選擇器后添加類似于"不重復(fù)屬性"的字段, 類似于作用域的作用,不影響全局.
3. 如果組件內(nèi)部還有組件,只會(huì)給最外層的組件里的標(biāo)簽加上唯一屬性字段,不影響組件內(nèi)部引用的組件.
謹(jǐn)慎使用:
1. 父組件無(wú)scoped屬性,子組件帶有scoped,父組件是無(wú)法操作子組件的.
2.父組件有scoped屬性,子組件無(wú)scoped.父組件也無(wú)法設(shè)置子組件樣式.因?yàn)楦附M件的所有標(biāo)簽都會(huì)帶有data-v-5db9451a唯一標(biāo)志，但子組件不會(huì)帶有這個(gè)唯一標(biāo)志屬性.
3.父子組建都有，同理也無(wú)法設(shè)置樣式，更改起來(lái)增加代碼量.
總結(jié)
到此這篇關(guān)于vue 中 scoped 樣式作用域的規(guī)則的文章就介紹到這了,更多相關(guān)vue scoped 樣式作用域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
單項(xiàng)數(shù)據(jù)流和雙向數(shù)據(jù)綁定的概念，這兩種不是相互沖突的嗎？即然能用v-model雙向數(shù)據(jù)綁定，不應(yīng)該就是雙向數(shù)據(jù)流了嗎？本文就詳細(xì)的介紹一下2022-04-04
下面小編就為大家?guī)?lái)一篇vue引入jq插件的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧2023-08-08
vue全局自定義指令-元素拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了面板拖拽之vue自定義指令,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu)
TypeScript 是JS的一個(gè)超級(jí)，主要提供了類型系統(tǒng)和對(duì)ES6的支持，使用 TypeScript 可以增加代碼的可讀性和可維護(hù)性，在 react 和 vue 社區(qū)中也越來(lái)越多人開(kāi)始使用TypeScript，這篇文章主要介紹了Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu),需要的朋友可以參考下2022-04-04
vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案
這篇文章主要介紹了vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案,prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對(duì)象，而類或者說(shuō)是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下2021-07-07
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript代碼，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-10-10
這篇文章主要為大家介紹了Vue的計(jì)算屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
elementUI中input回車觸發(fā)頁(yè)面刷新問(wèn)題與解決方法
這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁(yè)面刷新問(wèn)題與解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07