vue中組件樣式?jīng)_突的問題解決
1：組件樣式?jīng)_突問題
默認(rèn)情況下，寫在.vue組件中的樣式會(huì)全局生效，因此很容易造成組件之間的樣式?jīng)_突問題。
2：導(dǎo)致組件之間樣式?jīng)_突的根本原因是：
單頁面應(yīng)用程序中，所有組件的dom結(jié)構(gòu)，都是基于唯一的index.html頁面進(jìn)行呈現(xiàn)，每個(gè)組件的樣式都會(huì)影響index.html中的dom元素。
3：問題演示
App.vue組件中注冊了私有組件Left.vue，Right.vue組件
在left組件中給<h1>標(biāo)簽添加了樣式，會(huì)影響到right組件中<h1>標(biāo)簽
可以看到在left組件中添加的h1樣式影響到了h2樣式
4：通過設(shè)置scoped解決組件之間樣式?jīng)_突問題
5：設(shè)置scoped解決組件樣式?jīng)_突的原理
在組件中的<style>標(biāo)簽中設(shè)置scoped這個(gè)屬性，相當(dāng)于在這個(gè)組件中打了一個(gè)標(biāo)記，在其他組件中使用這個(gè)組件時(shí)樣式只對這個(gè)組件生效，其他組件中的組件沒有這個(gè)標(biāo)記即不生效。
也可以不加這個(gè)scoped這個(gè)屬性，自定義一個(gè)標(biāo)記進(jìn)行標(biāo)識使用
6：使用deep修改子組件的樣式
在left組件和right組件中引入了test組件，現(xiàn)在想在left這個(gè)組件中修改test這個(gè)子組件中的標(biāo)簽樣式，發(fā)現(xiàn)不起作用。
可以使用/deep/ 語法從父組件中操作子組件
7：/deep/的應(yīng)用場景
使用vue的組件庫像：Element Ui 或者 Vant，當(dāng)我們使用組件庫中的組件想修改組件，就可以使用/deep/進(jìn)行操作第三方組件的樣式
到此這篇關(guān)于vue中組件樣式?jīng)_突的問題解決的文章就介紹到這了,更多相關(guān)vue 組件樣式?jīng)_突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vue3.0使用axios報(bào)錯(cuò)問題
這篇文章主要介紹了vue3.0使用axios報(bào)錯(cuò)問題記錄,vue-cli3.0安裝插件的時(shí)候要注意區(qū)分vue-cli2.0的命令，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用
這篇文章主要介紹了vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue mixins合并策略以及應(yīng)用場景,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue3子組件數(shù)據(jù)無法更新問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇在vue項(xiàng)目中,使用axios跨域處理，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在Vue3中使用CSS Modules實(shí)現(xiàn)樣式隔離
隨著構(gòu)建現(xiàn)代前端應(yīng)用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應(yīng)運(yùn)而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實(shí)現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
文章講述了在Vue.js中如何根據(jù)數(shù)組索引渲染特定的數(shù)組元素,首先,介紹如何只渲染數(shù)組中的第一條數(shù)據(jù),其次,討論如何在特定頁面渲染特定的數(shù)組元素,例如通過父組件傳遞參數(shù)來決定渲染哪一條數(shù)據(jù),文章總結(jié)了個(gè)人經(jīng)驗(yàn),為開發(fā)者提供了一種有用的解決方案2025-11-11
vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名
這篇文章主要介紹了vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
一文詳解Vue3中watch的使用方法、寫法及應(yīng)用場景
在?Vue?3?的組合式?API（Composition?API）中,watch?是一個(gè)非常核心且強(qiáng)大的工具,用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化并執(zhí)行相應(yīng)的副作用操作,本文將結(jié)合實(shí)際代碼示例,深入講解?watch?的使用方法、參數(shù)配置,需要的朋友可以參考下2026-02-02