如何修改Vue.js中scoped模式下的子元件內部標籤樣式-js教程-PHP中文網

這篇文章給大家分享的是如何修改Vue.js中scoped模式下的子組件內部標籤樣式 ，內容挺不錯的，希望可以幫助到有需要的朋友

在Vue.js在專案中，我們通常會在 #標籤上加上 scoped 屬性，來為我們的元件產生一個唯一屬性，如下面的程式碼：

my-comp.vue

# my comp

export default { } 登入後複製 產生後的html如下，可以看到 p 以及所有子標籤上都有一個 data-v-0a679ea0 標識屬性，這個屬性就是我們在 上加上 scoped 的結果，如果你不加上 scoped ，是不會產生這個標識屬性的。

這個標識屬性為我們帶來一個好處是，元件內的樣式不會影響到其他元件的標籤，試想一下，如果我在my-comp元件中寫瞭如下樣式：

span { color: red; } 登入後複製 這個樣式是一個非常通用的樣式，如果其他元件中也有 span 標籤，那就會應用到這個標籤上了，加了 scoped 之後，最終產生的樣式是這樣的：

span { color: red; } //生成后如下 span[data-v-0a679ea0] { color: red; } 登入後複製 span[data-v-0a679ea0] 這個樣式只會應用到自己元件的span上，因為標識屬性是組件唯一的。

如果我們把元件A放到元件B裡面，看看這個識別屬性是如何產生的。

home.vue

import MyCompo from './my-comp' export default { components: {MyCompo} } 登入後複製 產生的html程式碼如下：

data-v-957c7522 是 home 元件的識別屬性，這個屬性也被加到了 my-comp 元件的根上，但注意 my-comp 的 span 標籤沒有加 data-v-957c7522 標識屬性，因為這個 span 是 my-comp 元件內部的標籤，並沒有顯示的在 home 元件中編寫。

但有時候會出現需要在home元件寫入樣式來修改my-comp內的標籤這樣的情況。

看下面程式碼：

# 這段程式碼屬於home元件的

.my-comp span { color: blue; } 登入後複製 但這段程式碼是不會改變 my comp 的顏色的，因為這段樣式最終生成的樣子是這樣的：

my-comp 的 span 標籤並沒有 data-v-957c9522 這個標識屬性。

#如何解決這個問題？

我們可以把home組件的scoped去掉就解決了，但這是不推薦的做法，上面已經說了，沒有scoped的樣式很容易影響其他組件，這種錯誤是非常難排查的。

如果你使用less這種樣式語言，那麼有個非常好的解決方案，看下面程式碼：

@deep: ~'>>>'; .my-comp @{deep} span { color: blue; } 登入後複製 我們再看最後產生的樣式是怎麼樣的。

# 標識屬性從 span 移到了 .my-comp 上了，這樣這段樣式就很好的應用到了 my-comp 元件的內部 span 標籤，並且不會影響到其他元件。