欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?scoped與深度選擇器deep的原理分析

 更新時(shí)間:2022年10月19日 11:53:02   作者:青天訣  
這篇文章主要介紹了vue?scoped與深度選擇器deep的原理分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

JS引入模塊化概念后,變得更易于開(kāi)發(fā)維護(hù),但是css樣式由于其特殊性,一直沒(méi)有實(shí)現(xiàn)模塊化,scoped的出現(xiàn)就是為了實(shí)現(xiàn)樣式模塊化,其本質(zhì)利用屬性選擇器實(shí)現(xiàn)的一種偽模塊化,并非真正意義上的模塊化,但這已經(jīng)讓css模塊化前進(jìn)了一大步,要知道JS的模塊化也是以這種方式開(kāi)始的,比如早期的seajs,requirejs都是利用閉包封裝達(dá)到模塊化的效果,后來(lái)慢慢的出現(xiàn)了ES6的模塊化規(guī)范import/export,說(shuō)不定未來(lái)的某一天css也會(huì)出現(xiàn)真正的模塊化,我們就不用學(xué)習(xí)這種知識(shí)點(diǎn)了。

說(shuō)回正題,該篇文章主要從以下幾個(gè)問(wèn)題,進(jìn)行探索scoped和deep相關(guān)的實(shí)現(xiàn)原理:

  • 1.scoped生成的dom和style有什么特點(diǎn);
  • 2.父組件引入子組件,生成的dom和style有什么區(qū)別;
  • 3.父組件傳入的子組件slot,生成的dom和style是什么樣的;
  • 4.父組件如何修改子組件的樣式;

scoped的作用

scoped主要用于vue中style部分,加上scoped后,最終生成的dom和style都會(huì)被加上一個(gè)唯一的動(dòng)態(tài)屬性,這樣樣式只會(huì)對(duì)當(dāng)前組件有效,不會(huì)污染全局樣式。

如下圖所示:

未加scoped

<template>
    <div class="parent">
        <h1>前端名獅</h1>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less">
.parent {
    color: red;
    h1 {
        font-size: 30px;
    }
}
</style>

加上scoped

<template>
    <div class="parent">
        <h1>前端名獅</h1>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.parent {
    color: red;
    h1 {
        font-size: 30px;
    }
}
</style>

通過(guò)上面兩種情況對(duì)比,我們發(fā)現(xiàn):

  • 1.加上scoped后,dom會(huì)被添加上一個(gè)唯一的屬性值,生成的style樣式也會(huì)使用該屬性作為屬性選擇器設(shè)置樣式,這樣使得樣式只對(duì)該組件有效,避免了全局樣式污染;
  • 2.每個(gè)組件內(nèi)的dom標(biāo)簽都會(huì)被設(shè)置上同一個(gè)data屬性值;

對(duì)于上面兩條規(guī)律,父組件內(nèi)引入子組件的情況下,是否一樣呢?

父組件:

<template>
	<div class="parent">
		<h1>前端名獅</h1>
		<child>
		<div class="time">時(shí)間:2020年9月16日</div>
		</child>
	</div>
</template>
<script>
import Child from "./Child.vue";
export default {
  components: {
    Child,
  },
};
</script>
<style lang="less" scoped>
.parent {
	color: red;
	h1 {
		font-size: 30px;
	}
}
</style>

子組件:

<template>
    <div class="child">
        <div class="author">作者:訣九</div>
        <div class="introduce">介紹:定期推送前端技術(shù)相關(guān)文章,面試題詳解</div>
        <slot />
    </div>
</template>
<script>
export default {};
</script>
<style lang="less">
.child {
    font-size: 20px;
    .author {
        font-weight: 600;
        color: red;
    }
    .introduce {
        color: blue;
    }
}
</style>

根據(jù)上圖我們會(huì)發(fā)現(xiàn):

  • 1.父組件內(nèi)出現(xiàn)的dom標(biāo)簽都會(huì)被添加上同一個(gè)屬性值,包括給子組件傳入的slot內(nèi)容;
  • 2.父組件的屬性值只會(huì)設(shè)置在子組件的最外層,并不會(huì)設(shè)置到子組件的內(nèi)部dom元素上;

常用的組件庫(kù),比如element、vux、vant提供的組件是不帶scoped的。但是我們寫(xiě)的子組件大部分都是帶有scoped的,看下生成的dom和style如下圖:

deep作用

看到這里,我們清楚了scoped對(duì)于生成的dom和style的影響,以及避免全局污染的原理。但是在使用scoped的父組件中如何修改子組件樣式呢?

我們一般會(huì)這么寫(xiě)

<style lang="less" scoped>
.parent {
	color: red;
	h1 {
		font-size: 30px;
	}
	.child {
	    font-size: 20px;
	    .author {
	        color: orange;
	    }
	}
}
</style>

但是最終生成的樣式是以父組件的屬性值作為選擇器的,這樣父組件就只能修改子組件最外層的div樣式,但是修改子組件內(nèi)層元素的樣式是不可行的。

想要修改子組件的內(nèi)層元素樣式,就需要使用/deep/了,/deep/是less中深度選擇器的>的另一種寫(xiě)法,只是因?yàn)?gt;在vue模板中不能正常解析,所以用/deep/代替。

修改下父組件:

<style lang="less" scoped>
.parent {
	color: red;
	h1 {
		font-size: 30px;
	}
/deep/	.child {
	    font-size: 20px;
	    .author {
	        color: orange;
	    }
	}
}
</style>

image

總結(jié)

這個(gè)知識(shí)點(diǎn)我們經(jīng)常使用,但是很多人卻不知道為什么,實(shí)際看下生成的style就知道了。

  • 1.scoped本質(zhì)上是給dom增加一個(gè)唯一屬性,然后利用這個(gè)屬性作為屬性選擇器設(shè)置樣式達(dá)到模塊化的目的(這里的屬性值是vue-template-complier編譯時(shí)動(dòng)態(tài)添加的,具體看源碼);
  • 2./deep/為了解決scoped引發(fā)的父組件修改子組件內(nèi)部樣式問(wèn)題出現(xiàn)的;

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論