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

export default { } Nach dem Login kopieren sehen p und alle Unter-Tags haben ein data-v-0a679ea0 -Identifikationsattribut. Dieses Attribut wird verwendet, wenn wir scoped 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 span { color: red; } Nach dem Login kopieren -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. span { color: red; } //生成后如下 span[data-v-0a679ea0] { color: red; } Nach dem Login kopieren 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:

import MyCompo from './my-comp' export default { components: {MyCompo} } Nach dem Login kopieren

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 my comp , da dieser Stil letztendlich generiert wird sieht so aus:

.my-comp span { color: blue; } Nach dem Login kopieren

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.

@deep: ~'>>>'; .my-comp @{deep} span { color: blue; } Nach dem Login kopieren 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.