默認情況下,寫在 .vue 組件中的樣式會全局生效,因此很容易造成多個組件之間的樣式沖突問題。導致組件之間樣式沖突的根本原因是:
① 單頁面應用程序中,所有組件的 DOM 結構,都是基于唯一的 index.html 頁面進行呈現的。
② 每個組件中的樣式,都會影響整個 index.html 頁面中的 DOM 元素。
解決組件樣式沖突問題,可以參考以下幾種方法:
1.分配唯一的自定義屬性
為每個組件分配唯一的自定義屬性,在編寫組件樣式時,通過屬性選擇器來控制樣式的作用域,示例代碼如下:
???輪播圖組件??
2. style 節點的 scoped 屬性
為了提高開發效率和開發體驗,vue 為 style 節點提供了 scoped 屬性,從而防止組件之間的樣式沖突問題,示例代碼如下:
?????輪播圖組件
?
3./deep/ 樣式穿透
如果給當前組件的 style 節點添加了 scoped 屬性,則當前組件的樣式對其子組件是不生效的。如果想讓某些樣式對子組件生效,可以使用 /deep/ 深度選擇器。
注意/deep/是vue2.x中實現樣式穿透的方案。在vue3.x中推薦使用:deep()替代/deep/。
Copyright ? 2013-2021 河南云和數據信息技術有限公司 豫ICP備14003305號 ISP經營許可證:豫B-20160281