如何修改Vue.js中scoped模式下的子元件內部標籤樣式

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

在Vue.js在專案中，我們通常會在c9ccee2e6ea535a969eb3f532ad9fe89#標籤上加上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標識屬性，這個屬性就是我們在c9ccee2e6ea535a969eb3f532ad9fe89上加上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 &#39;./my-comp&#39;
  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>

但這段程式碼是不會改變45a2772a6b6107b401db3c9b82c049c2my comp54bdf357c58b8a65c66d7c19c8e4d114的顏色的，因為這段樣式最終生成的樣子是這樣的：

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

#如何解決這個問題？

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

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

<style lang="less" scoped>
  @deep: ~&#39;>>>&#39;;
  .my-comp @{deep} span {
    color: blue;
  }
</style>

我們再看最後產生的樣式是怎麼樣的。

#

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

以上是如何修改Vue.js中scoped模式下的子元件內部標籤樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！