Wie formatiere ich untergeordnete Komponenten in Vue.js mit /deep/, >>>, ::v-deep und :deep?

>>, ::v-deep und :deep? " />

So verwenden Sie /deep/, >>> oder ::v-deep in Vue.js

Bei der Arbeit mit Komponentenstrukturen In Vue.js ist die Anwendung von Stilregeln auf Elemente innerhalb untergeordneter Komponenten erforderlich. Hier bietet Vue mehrere Optionen, um dies zu erreichen: /deep/, >>> und ::v-deep.

Vue 2.0 - 2.6

Sass: Nutzen Sie ::v-deep, um die Grenzen untergeordneter Komponenten zu durchdringen:

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

Einfaches CSS: Employ >>> um den gleichen Effekt zu erzielen:

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

Vue 3 (und Vue 2.7)

Unified Selector:Vue 3 führt :deep als einheitlichen Selektor ein, unabhängig von Sass Verwendung:

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

Slot-Inhalt:Styling-Elemente, die durch Slots geleitet werden:

:slotted(.slot-class) {
    background-color: #000;
}

Globale Stile: Globale Anwendung von Stilen aus bereichsbezogenen Komponenten :

:global(.my-class) {
    background-color: #000;
}

Schlüssel Überlegungen:

• Alle Stile müssen innerhalb von