如何解決vue組件之間的樣式?jīng)_突問題？
默認(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.分配唯一的自定義屬性
為每個組件分配唯一的自定義屬性，在編寫組件樣式時，通過屬性選擇器來控制樣式的作用域，示例代碼如下：
< template > < div class = "container"data - v - 001 > < h3 data-v-001 > 輪播圖組件 </h3> </div> </template> <style>
?/*通過中括號“屬性選擇器”，來防止組件之間的樣式?jīng)_突問題，
? ?因為每個組件分配的自定義屬性是“唯一的”*/
? ?.container[data - v - 001] {
? ? ? ?border: 1 px solid red;
? ?} </style>
2. style 節(jié)點的 scoped 屬性
為了提高開發(fā)效率和開發(fā)體驗，vue 為 style 節(jié)點提供了 scoped 屬性，從而防止組件之間的樣式?jīng)_突問題，示例代碼如下：
<template>
<div class="container"data-v-001>
?<h3 data-v-001 >輪播圖組件</h3>
</div> </template> <style>
? ?/* 通過中括號“屬性選擇器”，來防止組件之間的樣式?jīng)_突問題，
? ? ? 因為每個組件分配的自定義屬性是“唯一的”*/
? ?.container[data - v - 001] {
? ? ? ?border: 1 px solid red;
? ?}</style>
3./deep/ 樣式穿透
如果給當(dāng)前組件的 style 節(jié)點添加了 scoped 屬性，則當(dāng)前組件的樣式對其子組件是不生效的。如果想讓某些樣式對子組件生效，可以使用 /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/。
