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