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