So ändern Sie den internen Beschriftungsstil von Unterkomponenten im Bereichsmodus in Vue.js

In diesem Artikel erfahren Sie, wie Sie den internen Beschriftungsstil von Unterkomponenten in Vue.js ändern. Ich hoffe, er kann Freunden in Not helfen In Projekten fügen wir normalerweise das Attribut

scoped zum Tag c9ccee2e6ea535a969eb3f532ad9fe89 hinzu, um ein eindeutiges Attribut für unsere Komponente zu generieren, wie folgt: Der Code oben:

my-comp.vue

Der generierte HTML-Code lautet wie folgt, Sie können

<template>
  <p class="my-comp">
    <span>my comp</span>
  </p>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

sehen p

und alle Unter-Tags haben ein data-v-0a679ea0-Identifikationsattribut. Dieses Attribut wird verwendet, wenn wir scopedc9ccee2e6ea535a969eb3f532ad9fe89 hinzufügen von 🎜>: Wenn Sie scoped nicht hinzufügen, wird dieses Identifikationsattribut nicht generiert.

Ein Vorteil dieses Identifikationsattributs besteht darin, dass die Stile innerhalb der Komponente keinen Einfluss auf die Beschriftungen anderer Komponenten haben. Stellen Sie sich vor, ich befinde mich im my-comp Komponente Der folgende Stil wurde geschrieben:

Dieser Stil ist ein sehr häufiger Stil. Wenn in anderen Komponenten

span

<style>
  span {
    color: red;
  }
</style>

-Tags vorhanden sind, wird er auf dieses Tag angewendet 🎜>scoped

, der endgültig generierte Stil lautet wie folgt: span[data-v-0a679ea0]

Dieser Stil wird nur auf den eigenen Bereich angewendet Komponente, da die Identifikationseigenschaft für die Komponente eindeutig ist.

<style scoped>
  span { color: red; }
</style>
//生成后如下
<style>
  span[data-v-0a679ea0] {
    color: red;
  }
</style>

Wenn wir Komponente A in Komponente B einfügen, sehen wir uns an, wie dieses Identifikationsattribut generiert wird.

home.vue

Der generierte HTML-Code lautet wie folgt:

<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>

data-v-957c7522
ist das Identifikationsattribut der

home

-Komponente. Dieses Attribut wird auch zur my- hinzugefügt. comp-Komponente im Stammverzeichnis, aber beachten Sie, dass das span-Tag von my-comp das data-v-957c7522 Identifikationsattribut aus diesem Grund span ist ein Tag innerhalb der my-comp-Komponente und wird nicht explizit in die home-Komponente geschrieben. Aber manchmal gibt es Situationen, in denen Sie Stile in der Home-Komponente schreiben müssen, um die Tags in my-comp zu ändern.

Sehen Sie sich den folgenden Code an:

Dieser Code gehört zu Home-Komponente

Aber dieser Code ändert nicht die Farbe von 45a2772a6b6107b401db3c9b82c049c2my comp54bdf357c58b8a65c66d7c19c8e4d114, da dieser Stil letztendlich generiert wird sieht so aus:

<style scoped>
  .my-comp span {
    color: blue;
  }
</style>

my- The

span

-Tag von comp hat nicht das Identifikationsattribut data-v-957c9522.

Wie kann dieses Problem gelöst werden?

Wir können das Problem lösen, indem wir den Gültigkeitsbereich der Home-Komponente entfernen. Dies wird jedoch nicht empfohlen. Wie oben erwähnt, kann sich dieser Fehler leicht auf andere Komponenten auswirken ist sehr schwer zu beheben.

Wenn Sie eine Stilsprache wie less verwenden, gibt es eine sehr gute Lösung. Sehen Sie sich den folgenden Code an:

Werfen wir einen Blick auf den endgültig generierten Stil . von.

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

Das Identitätsattribut

wurde von span nach .my-comp verschoben, damit dieser Stil gut innerhalb der Komponente my-comp angewendet werden kann. span-Tag und hat keinen Einfluss auf andere Komponenten.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den internen Beschriftungsstil von Unterkomponenten im Bereichsmodus in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!