Wie formatiere ich untergeordnete Komponenten in Vue.js mithilfe von Tiefenselektoren?

Anwenden von Stilen auf untergeordnete Komponenten in Vue.js: /deep/, >>> und ::v-deep

In Vue.js können Sie Tiefenselektoren verwenden, um Elemente innerhalb untergeordneter Komponenten zu formatieren. Der Versuch, die Operatoren /deep/, >>> oder ::v-deep in Stilregeln zu verwenden, funktioniert jedoch möglicherweise nicht wie erwartet. Hier ist eine Anleitung zur korrekten Verwendung dieser Operatoren.

Vue 2.0 - 2.6

• Sass:

  Verwenden Sie ::v-deep vor dem Selektor, um Stile auf Elemente innerhalb des untergeordneten Elements anzuwenden Komponenten.

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

• Ohne Sass:

  Verwenden Sie >>> vor dem Selektor, um den gleichen Effekt zu erzielen.

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

Vue 3 (und Vue 2.7)

• Einheitliche Syntax:

  Verwenden Sie :deep() als Selektor, der den Zielelementselektor in Klammern einschließt. Diese Syntax funktioniert mit oder ohne Sass.

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

• Veraltete Syntax:

  Das ::v-deep-Präfix ist jetzt in Vue veraltet 3. Das >>> Operator ist ebenfalls veraltet.

Vue 3 Neue Selektoren

• Slot-Inhalt:

  Verwenden Sie :slotted(), um den weitergeleiteten Inhalt zu formatieren Slots.

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

• Globale Stile:

  Verwenden Sie :global(), um globale Stile aus einer bereichsbezogenen Komponente zu registrieren.

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

Scoping Anforderung

In allen Versionen von Vue ist der