Das Implementierungsprinzip von Scoped in Vue und die Verwendung von Scoped Penetration (mit Code)

In diesem Artikel geht es um das Implementierungsprinzip von Scoped in Vue und die Verwendung von Scoped Penetration (mit Code). Ich hoffe, dass es für Freunde in Not hilfreich ist Du hast geholfen.

1. Was ist der Gültigkeitsbereich?

Es gibt ein spezielles Attribut für das Style-Tag in der Vue-Datei, nämlich den Gültigkeitsbereich. Wenn ein Style-Tag über ein Gültigkeitsbereichsattribut verfügt, kann sein CSS-Stil nur für die aktuelle Vue-Komponente verwendet werden, sodass sich die Stile der Komponenten nicht gegenseitig verschmutzen. Wenn alle Stil-Tags in einem Projekt mit dem Attribut „scoped“ hinzugefügt werden, entspricht dies der Realisierung der Stilmodularisierung.

2. Das Implementierungsprinzip von Scoped

Der Effekt des Scoped-Attributs in Vue wird hauptsächlich durch PostCss erreicht. Das Folgende ist der Code vor der Übersetzung:

<style scoped>
    .example{
        color:red;
    }
</style>
<template>
    <div>scoped测试案例</div>
</template>

Nach der Übersetzung:

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

Beides: PostCSS fügt allen DOMs in einer Komponente ein eindeutiges dynamisches Attribut hinzu und fügt ein zusätzliches entsprechendes Attribut zum CSS-Selektor hinzu Der Selektor wird verwendet, um das DOM in der Komponente auszuwählen. Bei diesem Ansatz gilt der Stil nur für das DOM-Element, das das Attribut enthält (das DOM innerhalb der Komponente).

Zusammenfassung: bereichsbezogene Rendering-Regeln:

1. Fügen Sie ein eindeutiges Datenattribut (zum Beispiel: data-v-5558831a) zum HTML-Dom-Knoten hinzu, um diesen Dom eindeutig zu identifizieren Das Element

2. fügt am Ende jedes CSS-Selektors (der nach der Kompilierung generierten CSS-Anweisung) einen Datenattributselektor der aktuellen Komponente hinzu (z. B. [data-v-5558831a]). Stile privatisieren

3.scoped Penetration

scoped scheint im Vue-Projekt sehr nützlich zu sein, als wir Komponentenbibliotheken von Drittanbietern eingeführt haben (z. B. Verwendung von vue). awesome-swiper zum Implementieren eines mobilen Karussells), müssen Sie den Stil der Drittanbieter-Komponentenbibliothek in der lokalen Komponente ändern, möchten aber nicht das Bereichsattribut entfernen und eine Stilabdeckung zwischen Komponenten verursachen. Zu diesem Zeitpunkt können wir auf besondere Weise in das Zielfernrohr eindringen.

Die Stildurchdringung von Stylus verwendet>>>

    外层 >>> 第三方组件 
        样式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

Die Stildurchdringung von Sass and less verwendet /deep/

    外层 /deep/ 第三方组件 {
        样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

3. Ändern Sie die erste in der Komponente Andere Methoden von Komponentenbibliotheksstile von Drittanbietern

Oben haben wir die Methode zum Ändern und Einführen von Komponentenbibliotheksstilen von Drittanbietern durch Scopd-Penetration bei Verwendung des Bereichsattributs vorgestellt. Nachfolgend stellen wir andere Methoden zum Ändern und Einführen von Komponenten von Drittanbietern vor. Bibliotheksstile

Verwenden Sie nicht das Bereichsattribut in der Vue-Komponente. Verwenden Sie zwei Stil-Tags in der Vue-Komponente, eines mit dem Bereichsattribut und eines ohne das Bereichsattribut. Schreiben Sie den CSS-Stil, der überschrieben werden muss Hinzufügen von Scoped. Erstellen Sie eine Datei „reset.css“ (einfacher globaler Stil) im Stil-Tag des Attributs, schreiben Sie den überschriebenen CSS-Stil hinein und fügen Sie

in die Eintragsdatei „main.js“ ein. Empfohlene verwandte Artikel:

Einführung in zwei Möglichkeiten zur Implementierung des Komponentenwechsels in Vue (mit Code)

Wie der Knotenserver die Erfassung von Douban-Daten (Code) implementiert

Das obige ist der detaillierte Inhalt vonDas Implementierungsprinzip von Scoped in Vue und die Verwendung von Scoped Penetration (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!