五月天青色头像情侣网名,国产亚洲av片在线观看18女人,黑人巨茎大战俄罗斯美女,扒下她的小内裤打屁股

歡迎光臨散文網(wǎng) 會員登陸 & 注冊

如何解決vue組件之間的樣式?jīng)_突問題?

2023-03-11 18:05 作者:云和數(shù)據(jù)何老師  | 我要投稿


默認(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/。


如何解決vue組件之間的樣式?jīng)_突問題?的評論 (共 條)

分享到微博請遵守國家法律
临颍县| 革吉县| 剑河县| 佛冈县| 前郭尔| 上饶市| 拜城县| 琼海市| 桂东县| 漯河市| 澎湖县| 巴青县| 大渡口区| 葵青区| 格尔木市| 广德县| 苏尼特左旗| 舟山市| 宝坻区| 冕宁县| 淄博市| 长宁县| 永嘉县| 尼勒克县| 望谟县| 金溪县| 保亭| 和龙市| 江达县| 达拉特旗| 江陵县| 鹤山市| 阜新市| 大英县| 云和县| 大荔县| 依兰县| 闻喜县| 广东省| 武定县| 大化|