Detaillierte Erläuterung des bereichsbezogenen Implementierungsprinzips und der Penetrationsnutzungsschritte in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung des bereichsbezogenen Implementierungsprinzips und der Penetrationsnutzungsschritte in Vue geben. Lasst uns einmal einen Blick darauf werfen.

Was ist der Geltungsbereich? Auf dem Style-Tag in der Vue-Datei gibt es ein spezielles Attribut: Scoped. Wenn ein Stil-Tag über ein bereichsbezogenes Attribut verfügt, kann sein CSS-Stil nur auf die aktuelle Komponente angewendet werden, d. h. der Stil kann nur auf das aktuelle Komponentenelement angewendet werden. Durch dieses Attribut kann verhindert werden, dass sich die Stile zwischen Komponenten gegenseitig verunreinigen. Wenn alle Stil-Tags in einem Projekt einen Gültigkeitsbereich haben, entspricht dies der Realisierung der

Modularisierung

von Stilen.

Das Implementierungsprinzip von ScopedDer Effekt des Scoped-Attributs in Vue wird hauptsächlich durch PostCSS-Übersetzung realisiert. Das Folgende ist der Vue-Code vor der Übersetzung:

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <p class="example">hi</p>
</template>

nach der Übersetzung:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p class="example" data-v-5558831a>hi</p>
</template>

Das heißt: PostCSS fügt allen DOMs in einer Komponente ein eindeutiges dynamisches Attribut hinzu und fügt dann ein zusätzliches entsprechendes

CSS-Selektor Der

Attributselektor wird verwendet, um den Dom in der Komponente auszuwählen. Bei diesem Ansatz gilt der Stil nur für den Dom, der dieses Attribut enthält – den internen Dom der Komponente.

Warum müssen Sie mit Zielfernrohr eindringen?

scoped sieht schön aus, aber in vielen Projekten wird es eine Situation geben, in der: auf eine Komponente eines Drittanbieters verweist

, die teilweise in die Komponente eingebunden werden muss Ändern Sie die Stile von Komponenten von Drittanbietern, ohne das Gültigkeitsbereichsattribut zu entfernen und eine Stilverunreinigung zwischen Komponenten zu verursachen. Derzeit kann Scoped nur mit speziellen Methoden durchdrungen werden.

<style scoped>
 外层 >>> 第三方组件 {
  样式
 }
</style>

Mit >>> können Sie bei der Verwendung von Bereichsattributen in den Bereich eindringen und die Werte anderer Komponenten ändern.

Eine geschwungene Methode, um das Land zu retten

Tatsächlich gibt es auch eine geschwungene Methode, um das Land zu retten, nämlich nach der Definition ein Stil-Tag, das ein Bereichsattribut enthält. Definieren Sie außerdem einen Stil-Tag, der das Bereichsattribut nicht enthält, d. h. definieren Sie ein globales Stil-Tag in einer Vue-Komponente und ein Stil-Tag mit einem Geltungsbereich:

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

Zu diesem Zeitpunkt müssen Sie nur den ersten Stil ändern. Das CSS des Drei-Parteien-Stils kann im ersten Stil geschrieben werden.

Persönlich empfohlene Methode

Die beiden oben genannten Methoden, die Penetrationsmethode, verletzen tatsächlich die Bedeutung des Bereichsattributs und die Kurvenspeichermethode ist ein weiteres Es macht den Code zu hässlich.

Ich persönlich empfehle die dritte Methode, das heißt: Da Scoped schön aussieht, aber viele Fallstricke enthält, wird nicht empfohlen, das Scoped-Attribut nicht zu verwenden, sondern die Unterschiede durch Hinzufügen eines Unique zu unterscheiden Klasse zu den äußeren Dom-Komponenten. Diese Methode erzielt nicht nur einen ähnlichen Effekt wie Scoped, sondern erleichtert auch das Ändern der Stile verschiedener Komponenten von Drittanbietern, und der Code sieht relativ komfortabel aus.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie WebPack, um Vue Multi-Page zu konfigurieren

So bedienen Sie node.js standardmäßig npm-Installationsverzeichnis

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des bereichsbezogenen Implementierungsprinzips und der Penetrationsnutzungsschritte in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!