本文介紹了.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ī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è)單頁會(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è)置的。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。