更新時間:2022-08-19 來源:黑馬程序員 瀏覽量:
默認情況下,寫在 .vue 組件中的樣式會全局生效,因此很容易造成多個組件之間的樣式沖突問題。導致組件之間樣式沖突的根本原因是:
① 單頁面應用程序中,所有組件的 DOM 結構,都是基于唯一的 index.html 頁面進行呈現(xiàn)的。
② 每個組件中的樣式,都會影響整個 index.html 頁面中的 DOM 元素。
解決組件樣式沖突問題,可以參考以下幾種方法:
1.分配唯一的自定義屬性
為每個組件分配唯一的自定義屬性,在編寫組件樣式時,通過屬性選擇器來控制樣式的作用域,示例代碼如下:
< template > < div class = "container"data - v - 001 > < h3 data-v-001 > 輪播圖組件 </h3> </div> </template> <style> /*通過中括號“屬性選擇器”,來防止組件之間的樣式沖突問題, 因為每個組件分配的自定義屬性是“唯一的”*/ .container[data - v - 001] { border: 1 px solid red; } </style>
2. style 節(jié)點的 scoped 屬性
為了提高開發(fā)效率和開發(fā)體驗,vue 為 style 節(jié)點提供了 scoped 屬性,從而防止組件之間的樣式沖突問題,示例代碼如下:
<template> <div class="container"data-v-001> <h3 data-v-001 >輪播圖組件</h3> </div> </template> <style> /* 通過中括號“屬性選擇器”,來防止組件之間的樣式沖突問題, 因為每個組件分配的自定義屬性是“唯一的”*/ .container[data - v - 001] { border: 1 px solid red; } </style>
3./deep/ 樣式穿透
如果給當前組件的 style 節(jié)點添加了 scoped 屬性,則當前組件的樣式對其子組件是不生效的。如果想讓某些樣式對子組件生效,可以使用 /deep/ 深度選擇器。
<style scoped> .title { color:blue;/*不加/deep/時,生成的選擇器格式為.title[data-v-052242de]*/ } /deep/ .title { color:blue;/*加上 /deep/ 時,生成的選擇器格式為[data-v-052242de] .title*/ } </style>
注意/deep/是vue2.x中實現(xiàn)樣式穿透的方案。在vue3.x中推薦使用:deep()替代/deep/。