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

scoped可以實(shí)現(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)會(huì)是這樣的

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

css樣式是這樣的

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

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

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

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

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

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

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

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

1、給template下的根節(jié)點(diǎn)加一個(gè)class，并基于這個(gè)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、基于第一條建議，不要有定義兩個(gè)相同class名稱的根節(jié)點(diǎn)，因?yàn)槎甲饔糜谡麄€(gè)單頁(yè)會(huì)有一個(gè)失效。

3、不要使用 span {}這種做樣式設(shè)置。因?yàn)?br />

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

上面的樣式同樣會(huì)作用于組件el-button,這是很危險(xiǎn)的

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論