vue中組件樣式?jīng)_突的問題解決
1：組件樣式?jīng)_突問題
默認(rèn)情況下，寫在.vue組件中的樣式會(huì)全局生效，因此很容易造成組件之間的樣式?jīng)_突問題。
2：導(dǎo)致組件之間樣式?jīng)_突的根本原因是：
單頁(yè)面應(yīng)用程序中，所有組件的dom結(jié)構(gòu)，都是基于唯一的index.html頁(yè)面進(jìn)行呈現(xiàn)，每個(gè)組件的樣式都會(huì)影響index.html中的dom元素。
3：?jiǎn)栴}演示
App.vue組件中注冊(cè)了私有組件Left.vue，Right.vue組件
在left組件中給<h1>標(biāo)簽添加了樣式，會(huì)影響到right組件中<h1>標(biāo)簽
可以看到在left組件中添加的h1樣式影響到了h2樣式
4：通過設(shè)置scoped解決組件之間樣式?jīng)_突問題
5：設(shè)置scoped解決組件樣式?jīng)_突的原理
在組件中的<style>標(biāo)簽中設(shè)置scoped這個(gè)屬性，相當(dāng)于在這個(gè)組件中打了一個(gè)標(biāo)記，在其他組件中使用這個(gè)組件時(shí)樣式只對(duì)這個(gè)組件生效，其他組件中的組件沒有這個(gè)標(biāo)記即不生效。
也可以不加這個(gè)scoped這個(gè)屬性，自定義一個(gè)標(biāo)記進(jìn)行標(biāo)識(shí)使用
6：使用deep修改子組件的樣式
在left組件和right組件中引入了test組件，現(xiàn)在想在left這個(gè)組件中修改test這個(gè)子組件中的標(biāo)簽樣式，發(fā)現(xiàn)不起作用。
可以使用/deep/ 語法從父組件中操作子組件
7：/deep/的應(yīng)用場(chǎng)景
使用vue的組件庫(kù)像：Element Ui 或者 Vant，當(dāng)我們使用組件庫(kù)中的組件想修改組件，就可以使用/deep/進(jìn)行操作第三方組件的樣式
到此這篇關(guān)于vue中組件樣式?jīng)_突的問題解決的文章就介紹到這了,更多相關(guān)vue 組件樣式?jīng)_突內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-06-06
關(guān)于eslint+prettier+husky的配置及說明
這篇文章主要介紹了關(guān)于eslint+prettier+husky的配置及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能(完整代碼)
驗(yàn)證碼功能在我們的身邊用處極廣，今天小編給大家分享基于vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能,感興趣的朋友跟隨小編一起看看吧2019-12-12
Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過程
這篇文章主要介紹了vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
VeeValidate 的使用場(chǎng)景以及配置詳解
這篇文章主要介紹了VeeValidate 的使用場(chǎng)景以及配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vuex mutations 同步操作方法,需要的朋友可以參考下2023-10-10
探索Vue中組合式API和選項(xiàng)式API的用法與比較
Vue3為我們開發(fā)提供了兩種組件邏輯實(shí)現(xiàn)方式：選項(xiàng)式API和組合式API,本文將嘗試為大家分析什么是選項(xiàng)式API和組合式API,以及兩種API的優(yōu)缺點(diǎn),希望對(duì)大家有所幫助2023-12-12
vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue?+?ElementUI表格內(nèi)實(shí)現(xiàn)圖片點(diǎn)擊放大效果的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了Vue?+?ElementUI表格內(nèi)實(shí)現(xiàn)圖片點(diǎn)擊放大效果的兩種實(shí)現(xiàn)方式,第一種使用el-popover彈出框來實(shí)現(xiàn)而第二種使用v-viewer插件實(shí)現(xiàn),需要的朋友可以參考下2024-08-08