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

說回正題，該篇文章主要從以下幾個(gè)問題，進(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都會被加上一個(gè)唯一的動態(tài)屬性，這樣樣式只會對當(dāng)前組件有效，不會污染全局樣式。

如下圖所示：

未加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>

通過上面兩種情況對比，我們發(fā)現(xiàn)：

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

對于上面兩條規(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ù)上圖我們會發(fā)現(xiàn)：

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

常用的組件庫，比如element、vux、vant提供的組件是不帶scoped的。但是我們寫的子組件大部分都是帶有scoped的，看下生成的dom和style如下圖：

deep作用

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

我們一般會這么寫

<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中深度選擇器的>的另一種寫法，只是因?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>

總結(jié)

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

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

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

最新評論