So ändern Sie den Stil einer Unterkomponente durch eine übergeordnete Komponente in Vue

Jetzt werde ich mit Ihnen einen Artikel darüber teilen, wie Sie den Stil einer untergeordneten Komponente in Vue anhand einer übergeordneten Komponente ändern können. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Bei der Entwicklung mit Vue verweisen wir manchmal auf externe Komponenten, einschließlich UI-Komponenten (ElementUI, iview).

Wenn das c9ccee2e6ea535a969eb3f532ad9fe89-Tag das Bereichsattribut hat, gilt sein CSS nur für Elemente in der aktuellen Komponente.

Aber nach dem Hinzufügen eines Bereichs zur übergeordneten Komponente dringt der Stil der übergeordneten Komponente nicht in die untergeordnete Komponente ein, sodass das Schreiben des Stils der untergeordneten Komponente in die übergeordnete Komponente keine Auswirkungen hat.

1. Geltungsbereich entfernen

Nachdem der Geltungsbereich aus dem 2758825b01e050f9490aeef3e7e80a42 entfernt wurde, kann der Stil der untergeordneten Komponente geändert werden in der übergeordneten Komponente geschrieben, aber Sie werden befürchten, dass dies den globalen Stil verunreinigt.

[Weil wir wissen, dass die richtige Art, globale Stile zu verwenden, darin besteht, eine globale app.css zu verwenden]

2. Mischen Sie lokale und globale Stile

Sie können sowohl bereichsbezogene als auch nicht bereichsbezogene Stile in einer Komponente verwenden:

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

Wir schreiben den Stil, der in der Unterkomponente geändert werden muss, im obigen globalen Stil

3. Verwenden Sie tiefgreifende Selektoren

Wenn Sie möchten, dass ein Selektor im Scoped-Stil „tiefer“ wirkt, z Sie können den >>>-Operator verwenden:

<style scoped>
.a >>> .b {
 /* ... */
}
</style>

Einige Präprozessoren wie SASS können >>> nicht korrekt analysieren. In diesem Fall können Sie stattdessen den /deep/-Operator verwenden – dies ist ein Alias ​​für >>> und funktioniert genauso gut.

OK, der Hauptinhalt sind die oben genannten Punkte.

Zusätzliche Ergänzungen sind:

1 Der über v-html erstellte DOM-Inhalt wird von den Stilen im Geltungsbereich nicht beeinflusst, sondern Sie Sie können sie immer noch über tiefe Aktionsselektoren formatieren

2. Der CSS-Bereich kann die Klasse nicht ersetzen

3. Ich habe es für alle kompiliert. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Konzept und Verwendung des Befehlsmodus in JS (ausführliches Tutorial)

Verwenden Sie Selen, um Taobao-Dateninformationen zu erfassen

So implementieren Sie ein Kartenraster mit Baidu Maps

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil einer Unterkomponente durch eine übergeordnete Komponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!