Warum funktionieren meine Vue.js ::v-deep-, >>>- und Deep-Selektoren nicht?

>> und Deep Selectors funktionieren? " />

Fehlerbehebung bei Vue.js ::v-deep, >>> und Deep Selectors

Hintergrund

Vue.js Bietet Möglichkeiten, Elemente in verschachtelten Komponenten mithilfe von Tiefenselektoren wie ::v-deep, >>> und :deep zu formatieren. Bei der Implementierung dieser Selektoren treten jedoch Probleme auf.

Problem

Versuch, ::v-deep oder >>> zu verwenden, um untergeordnete Elemente von innen anzusprechen Eine Vue-Komponente hat keine Auswirkung. Die Stilregeln werden wörtlich an die übergeben Browser.

Lösung

Vue 2.0 - 2.6

Sass:Verwenden Sie ::v-deep

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

Ohne Sass:Verwendung >>>

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

Stellen Sie sicher, dass das

<style scoped></style>

Vue 3 (und Vue 2.7)

Verwenden :deep(.child-class)

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

Vue 3 Neue Selektoren

Zusätzlich bietet Vue 3:

• Slot-Inhalte :Verwenden :slotted(.child-class)
• Globale Stile:Verwenden Sie :global(.my-class)

Auch hier sollte das

<style scoped></style>

Webpack Konfiguration

Wenn Sie Vue Loader verwenden, stellen Sie sicher, dass Ihre Konfiguration Folgendes enthält:

{
  test: /\.vue$/,
  use: 'vue-loader',
}

Zusammenfassung

Vue 2:

• Verwenden Sie ::v-deep in Sass, >>> ohne Sass
• Stellen Sie sicher, dass der

Vue 3:

• Verwenden Sie :deep(.child-class)
• Das ::v- Präfix ist veraltet
• Verwenden Sie :slotted und :global Selektoren als erforderlich
• Stellen Sie sicher, dass

Hinweis: Die /deep/-Syntax ist sowohl in Vue 2 als auch 3 veraltet.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine Vue.js ::v-deep-, >>>- und Deep-Selektoren nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!