更新時(shí)間:2021-12-30 來(lái)源:黑馬程序員 瀏覽量:
默認(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/。