淺談關(guān)于.vue文件中style的scoped屬性

本文介紹了.vue文件中style的scoped屬性以及踩到的坑，具體如下：

scoped可以實現(xiàn)style只作用于當(dāng)前的.vue文件

<template>
 <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
 color:#333;
}
</style>

上面的文件渲染出的dom結(jié)構(gòu)會是這樣的

<div data-v-53795c54 class="user"></div>

css樣式是這樣的

.user[data-v-53795c54] {
 color:#333;
}

這樣就現(xiàn)實了樣式只作用于當(dāng)前.vue文件。

問題：添加scoped屬性后樣式不起作用

原因是，css被構(gòu)建成.user[data-v-53795c54] 但是doc節(jié)點依然是普通的<div class="user"></div>，導(dǎo)致樣式不能作用在dom上而失效。

原因在引用的組件上，解決的方法是將scoped屬性關(guān)閉。

scoped關(guān)閉時的使用建議

如果需要將scoped關(guān)閉，那么style就是作用于整個單頁應(yīng)用

可是我們?nèi)匀幌胍獦邮街饔糜诋?dāng)前的.vue文件，減少對其他文件樣式的影響

1、給template下的根節(jié)點加一個class，并基于這個class添加樣式

<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>

</script>

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>

2、基于第一條建議，不要有定義兩個相同class名稱的根節(jié)點，因為都作用于整個單頁會有一個失效。

3、不要使用 span {}這種做樣式設(shè)置。因為

<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>

上面的樣式同樣會作用于組件el-button,這是很危險的

在vue組件中style scoped中遇到的坑

在uve組件中我們我們經(jīng)常需要給style添加scoped來使得當(dāng)前樣式只作用于當(dāng)前組件的節(jié)點。添加scoped之后，實際上vue在背后做的工作是將當(dāng)前組件的節(jié)點添加一個像data-v-1233這樣唯一屬性的標(biāo)識，當(dāng)然也會給當(dāng)前style的所有樣式添加[data-v-1233]這樣的話，就可以使得當(dāng)前樣式只作用于當(dāng)前組件的節(jié)點。但是我們需要注意的是如果我們添加了子組件，同樣的，如果子組件也用scoped標(biāo)識了，那么在父組件中是不能設(shè)置子組件中的節(jié)點的。若父組件有scoped，子組件沒有設(shè)置，同樣，也是不能在父組件中設(shè)置子組件的節(jié)點的樣式的，因為父組件用了scoped,那么父組件中style設(shè)置的樣式都是唯一的了，不會作用與其他的組件樣式，我在用vue-quill-editor富文本編輯器的時候就遇到了這個坑，我只是想讓內(nèi)容區(qū)設(shè)置一個高度，這樣的話，是必須在App.vue中設(shè)置的，我們App.vue相當(dāng)于根容器，沒有設(shè)置scoped，所以是可以設(shè)置的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com