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

<style scoped></style>

Zusammenfassung

• Verwenden Sie in Vue 2 ::v-deep mit Sass oder >>> ohne Sass.
• Verwenden Sie in Vue 3 :deep(.child-class).
• ::v-deep und >>> sind in Vue 3 veraltet.
• :slotted und :global Selektoren sind neu in Vue 3.
• Skalieren Sie immer den

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