怎樣解決組件之間的樣式?jīng)_突問題？

默認(rèn)情況下，寫在 .vue 組件中的樣式會(huì)全局生效，因此很容易造成多個(gè)組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因是：

①單頁(yè)面應(yīng)用程序中，所有組件的 DOM 結(jié)構(gòu)，都是基于唯一的 index.html 頁(yè)面進(jìn)行呈現(xiàn)的。

②每個(gè)組件中的樣式，都會(huì)影響整個(gè) index.html 頁(yè)面中的 DOM 元素。

1.自定義屬性

為每個(gè)組件分配唯一的自定義屬性，在編寫組件樣式時(shí)，通過屬性選擇器來(lái)控制樣式的作用域，示例代碼如下：

< template > 
< div class = "container"data - v - 001 > 
< h3 data - v - 001 > 輪播圖組件 < /h3> 
< /div> 
< /template>

 < style >
    /*通過中括號(hào)“屬性選擇器”，來(lái)防止組件之間的樣式?jīng)_突問題，
      因?yàn)槊總€(gè)組件分配的自定義屬性是“唯一的”*/
    .container[data - v - 001] {
        border: 1 px solid red; 
   }
 < /style>

2.style 節(jié)點(diǎn)的 scoped 屬性

為了提高開發(fā)效率和開發(fā)體驗(yàn)，vue 為 style 節(jié)點(diǎn)提供了 scoped 屬性，從而防止組件之間的樣式?jīng)_突問題

<template>
<div class="container">
     <h3>輪播圖組件</h3>
   </diV>
</template>

<style scoped>
/* style 節(jié)點(diǎn)的 scoped屬性，用來(lái)自動(dòng)為每個(gè)組件分配唯一的“自定義屬性”，
    并自動(dòng)為當(dāng)前組件的DOM標(biāo)簽和style樣式應(yīng)用這個(gè)自定義屬性，防止組件的樣式?jīng)_突問題*/
.container {
   border: 1px solid red;
}
</style>

3./deep/ 樣式穿透

如果給當(dāng)前組件的 style 節(jié)點(diǎn)添加了 scoped 屬性，則當(dāng)前組件的樣式對(duì)其子組件是不生效的。如果想讓某些樣式對(duì)子組件生效，可以使用 /deep/ 深度選擇器。

<style scoped>
.title {
  color:blue;/*不加/deep/時(shí)，生成的選擇器格式為|.title[data-v-052242de]*/
}

/deep/ .title {
  color：blue;/*加上/deep/時(shí)，生成的選擇器格式為[data-v-052242de] .title*/
}
</style>

注意：/deep/ 是 vue2.x 中實(shí)現(xiàn)樣式穿透的方案。在 vue3.x 中推薦使用 :deep() 替代 /deep/。