這篇文章給大家分享的是如何修改Vue.js中scoped模式下的子組件內部標籤樣式 ,內容挺不錯的,希望可以幫助到有需要的朋友
在Vue.js在專案中,我們通常會在#標籤上加上scoped屬性,來為我們的元件產生一個唯一屬性,如下面的程式碼:
my-comp.vue
#<template> <p class="my-comp"> <span>my comp</span> </p> </template> <script> export default { } </script> <style scoped> </style>
產生後的html如下,可以看到p 以及所有子標籤上都有一個data-v-0a679ea0標識屬性,這個屬性就是我們在上加上scoped的結果,如果你不加上scoped,是不會產生這個標識屬性的。
這個標識屬性為我們帶來一個好處是,元件內的樣式不會影響到其他元件的標籤,試想一下,如果我在my-comp元件中寫瞭如下樣式:
<style> span { color: red; } </style>
這個樣式是一個非常通用的樣式,如果其他元件中也有span標籤,那就會應用到這個標籤上了,加了 scoped之後,最終產生的樣式是這樣的:
<style scoped> span { color: red; } </style> //生成后如下 <style> span[data-v-0a679ea0] { color: red; } </style>
span[data-v-0a679ea0]這個樣式只會應用到自己元件的span上,因為標識屬性是組件唯一的。
如果我們把元件A放到元件B裡面,看看這個識別屬性是如何產生的。
home.vue
<template> <p class="home"> <my-compo></my-compo> </p> </template> <script> import MyCompo from './my-comp' export default { components: {MyCompo} } </script> <style scoped> </style>
產生的html程式碼如下:
data-v-957c7522是home元件的識別屬性,這個屬性也被加到了my-comp元件的根上,但注意my-comp的span標籤沒有加data-v-957c7522標識屬性,因為這個span是my-comp元件內部的標籤,並沒有顯示的在home元件中編寫。
但有時候會出現需要在home元件寫入樣式來修改my-comp內的標籤這樣的情況。
看下面程式碼:
# 這段程式碼屬於home元件的
<style scoped> .my-comp span { color: blue; } </style>
但這段程式碼是不會改變my comp的顏色的,因為這段樣式最終生成的樣子是這樣的:
my-comp的span標籤並沒有data-v-957c9522這個標識屬性。
#如何解決這個問題?
我們可以把home組件的scoped去掉就解決了,但這是不推薦的做法,上面已經說了,沒有scoped的樣式很容易影響其他組件,這種錯誤是非常難排查的。
如果你使用less這種樣式語言,那麼有個非常好的解決方案,看下面程式碼:
<style lang="less" scoped> @deep: ~'>>>'; .my-comp @{deep} span { color: blue; } </style>
我們再看最後產生的樣式是怎麼樣的。
標識屬性從span移到了.my-comp上了,這樣這段樣式就很好的應用到了my-comp元件的內部span標籤,並且不會影響到其他元件。
以上是如何修改Vue.js中scoped模式下的子元件內部標籤樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!