Umfangreiche Nutzungsschrittanalyse in Vue

Dieses Mal werde ich die Schritte zur Verwendung von Scoped in Vue analysieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von Scoped in Vue?

Was ist der Geltungsbereich?

Auf dem Style-Tag in der Vue-Datei gibt es ein spezielles Attribut: Scoped. Wenn ein Style-Tag über das Attribut „scoped“ 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 Scoped

Der 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 bereichsbezogenes Attribut enthält. Definieren Sie außerdem einen Stil-Tag, der das bereichsbezogene Attribut 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:

Detaillierte Erläuterung der Schritte zum Aufbau einer Reaktionsentwicklungsumgebung mit Webpack

Detaillierte Erläuterung der Schritte zum Installieren und Löschen von NPM-Modulen

Das obige ist der detaillierte Inhalt vonUmfangreiche Nutzungsschrittanalyse in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!