Wie formatiere ich untergeordnete Komponenten in Vue.js mithilfe von CSS-Selektoren?

Styling untergeordneter Komponenten in Vue.js mit /deep/, >>> oder ::v-deep

Im Kontext von Vue.js Mithilfe spezifischer CSS-Selektoren kann eine granulare Gestaltung untergeordneter Komponenten erreicht werden. Bei der Implementierung können jedoch Probleme auftreten.

Vue 2.0 - 2.6

Um untergeordnete Komponenten zu durchdringen und verschachtelte Elemente auszuwählen, können Sie entweder ::v- verwenden. tief (mit Sass) oder >>> (ohne Sass) in Ihren CSS-Regeln wie folgt:

Sass:

::v-deep .child-class {
    background-color: #000;
}

Anderes CSS:

>>> .child-class {
    background-color: #000;
}

Hinweis dass der

Vue 3 (und Vue 2.7)

In Vue 3 ist das :: Das v--Präfix ist veraltet. Verwenden Sie stattdessen den einheitlichen Selektor :deep. Die empfohlene Syntax besteht jedoch darin, den Selektor in Klammern zu setzen:

:deep(.child-class) {
    background-color: #000;
}

Diese Lösung ist auch auf Vue 2.7, die letzte Version von Vue 2, anwendbar .

Zusätzliche Selektoren in Vue 3

1. :slotted(.slot-class): Zielt auf Inhalte ab, die über weitergeleitet werden.
2. :global(. my-class): Gilt global für bestimmte Elemente, auch aus einem Gültigkeitsbereich Komponente.

Alle Selektoren müssen innerhalb eines

Zusätzliche Überlegungen

• /deep/ Die Syntax ist in allen Versionen veraltet.
• ::v-prefix ist in Vue 3 veraltet und oben.
• >>> Die Syntax ist in Vue 3 und höher veraltet.

Durch die Anwendung dieser Stiltechniken können Sie das Erscheinungsbild von Elementen in untergeordneten Komponenten in Ihren Vue.js-Anwendungen effektiv gezielt anpassen und anpassen.

Das obige ist der detaillierte Inhalt vonWie formatiere ich untergeordnete Komponenten in Vue.js mithilfe von CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!