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

/* 全局样式 */ /* 本地样式 */ Nach dem Login kopieren 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:

.a >>> .b { /* ... */ } Nach dem Login kopieren 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