vue組件scoped如何作用

這篇文章主要介紹“vue組件scoped如何作用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue組件scoped如何作用”文章能幫助大家解決問(wèn)題。

vue組件-scoped作用

目的: 解決多個(gè)組件樣式名相同, 沖突問(wèn)題

需求: p標(biāo)簽名選擇器, 設(shè)置背景色

問(wèn)題: 發(fā)現(xiàn)組件里的p和外面的p都生效了

解決: 給Pannel.vue組件里style標(biāo)簽上加scoped屬性即可

<style scoped>

// style 添加 scoped 屬性后，可以實(shí)現(xiàn)樣式獨(dú)立作用域<style scoped>p{
    background-color: pink;}</style>

在style上加入scoped屬性, 就會(huì)在此組件的標(biāo)簽上加上一個(gè)隨機(jī)生成的data-v開(kāi)頭的屬性

而且必須是當(dāng)前組件的元素, 才會(huì)有這個(gè)自定義屬性, 才會(huì)被這個(gè)樣式作用到

總結(jié): style上加scoped, 組件內(nèi)的樣式只在當(dāng)前vue組件生效

scoped的使命與作用

這里用vue做了一個(gè)demo,兩個(gè)頁(yè)面，一個(gè)頁(yè)面中是掘金的a標(biāo)簽，一個(gè)頁(yè)面是vue的a標(biāo)簽,我們一起看下scoped的作用,給其中一個(gè)頁(yè)面的a標(biāo)簽加上紅色，另外一個(gè)沒(méi)有加任何樣式，并且沒(méi)有在style中使用scoped，如下圖

答案大家應(yīng)該都知道，沒(méi)錯(cuò)！兩個(gè)頁(yè)面中的鏈接文字都變成了紅色，當(dāng)我們點(diǎn)擊juejin這個(gè)頁(yè)面的時(shí)候，瀏覽器會(huì)自動(dòng)引入當(dāng)前頁(yè)面的樣式，再去點(diǎn)擊github時(shí)瀏覽器會(huì)復(fù)用這個(gè)樣式，所以a鏈接的顏色都會(huì)變紅，因?yàn)閂ue是單頁(yè)面應(yīng)用，所以我們打開(kāi)的每一個(gè)頁(yè)面的樣式都會(huì)被夾在成全局的樣式，解決辦法就是加上scoped,這時(shí)a標(biāo)簽的顏色就不同了，我們打開(kāi)頁(yè)面看下a標(biāo)簽(下圖)

這時(shí)候的a標(biāo)簽多了一個(gè)data-v-xxxxxxx這個(gè)東西，這個(gè)就是Vue替我們加上的， Vue在構(gòu)建構(gòu)建這個(gè)項(xiàng)目的時(shí)候會(huì)提我們以組件單位，不同的組件下所有的元素都會(huì)加上同一個(gè)類似組件ID的東西，同時(shí)會(huì)在我們寫的樣式上以屬性選擇器的方式拼接上這個(gè)唯一標(biāo)識(shí)，我們來(lái)驗(yàn)證一下，（下圖）

對(duì)的，我們加上scoped之后Vue會(huì)在這段樣式的最后一段加上這個(gè)屬性，然后通過(guò)屬性選擇器選中這個(gè)元素，從而實(shí)現(xiàn)元素樣式的隔離，接下來(lái)我們一起看下scoped的副作用

scoped的副作用

這時(shí)我們引入element-ui驗(yàn)證一下scoped的副作用，這里寫了一個(gè)demo(下圖)，這里也使用了scoped

注意這里的input元素是沒(méi)有例如data-v-xxxxxx的唯一標(biāo)識(shí)的

但是我們自己寫的樣式（my-Txt input）在被構(gòu)建之后是什么樣子的呢？(下圖)

如上圖所示，我們自己寫的樣式卻被拼接了這個(gè)唯一的標(biāo)識(shí)，所以我們?cè)僭趺床僮饕彩菦](méi)法命中這個(gè)元素的，也就是說(shuō)Vue并沒(méi)有給這個(gè)input加上這個(gè)標(biāo)識(shí)，但是卻在我們的樣式中加上了這個(gè)標(biāo)識(shí)，但是我們?nèi)绻裺coped去掉，那么就能命中目標(biāo)，但是這樣我們是不推薦的，樣式會(huì)被打包到統(tǒng)一的樣式中，這就是scoped的副作用，那我們?cè)趺唇鉀Q它呢？樣式穿透

<style scoped>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>

我們可以看到這個(gè)唯一標(biāo)識(shí)從input后面跑到了my-Txt的后面了，也就是說(shuō)我們不加入這個(gè)::v-deep,Vue永遠(yuǎn)都會(huì)把這個(gè)唯一的標(biāo)識(shí)拼接在我們寫的樣式的最后一段，如果我們想改變這個(gè)唯一標(biāo)識(shí)的位置，就需要你用樣式穿透來(lái)指定，那么上圖的意思就是帶有這個(gè)唯一標(biāo)識(shí)的my-Txt的元素，它的子元素中的input會(huì)應(yīng)用這個(gè)樣式，而我們寫的這個(gè)my-Txt也是具備這個(gè)唯一標(biāo)識(shí)的，從上面圖可以看到。

關(guān)于“vue組件scoped如何作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。