Einfache Analyse der Rolle der Vue-Komponente im Geltungsbereich

Dieser Artikel bringt Ihnen relevantes Wissen über vue, das hauptsächlich Probleme im Zusammenhang mit dem Bereichsattribut zum Stil einführt, um der Beschriftung dieser Komponente zufällig generierte Daten hinzuzufügen mit -v. Ich hoffe, es wird für alle hilfreich sein.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial】

vue-Komponentenbereichsfunktion

Zweck: Lösen Sie das Konfliktproblem mehrerer Komponenten mit demselben Stilnamen

Anforderung : p-Tag-Namensauswahl, Hintergrundfarbe festlegen

Problem: Es wurde festgestellt, dass das p innerhalb der Komponente und das p außerhalb effektiv sind

Lösung: Fügen Sie das Bereichsattribut zum Style-Tag in der Panel.vue-Komponente hinzu

<style></style>

// style 添加 scoped 属性后，可以实现样式独立作用域<style>p{
    background-color: pink;}</style>

Hinzufügen Mit dem Geltungsbereich des Stilattributs wird ein zufällig generiertes Attribut, das mit data-v beginnt, zur Beschriftung dieser Komponente hinzugefügt

Und es muss ein Element der aktuellen Komponente sein, um dieses benutzerdefinierte Attribut zu haben und von diesem Stil betroffen zu sein

Zusammenfassung: Scoped zum Stil hinzufügen, der Stil in der Komponente wird nur in der aktuellen Vue-Komponente wirksam

Die Mission und Rolle von Scoped

Hier ist eine mit Vue erstellte Demo, zwei Seiten, eine Seite ist Für Nuggets ein Tag, eine Seite ist das A-Tag von Vue. Werfen wir einen Blick auf die Rolle von Scoped. Fügen Sie Rot zum A-Tag einer der Seiten hinzu. Die andere Seite fügt keinen Stil hinzu und verwendet keinen Scoped im Stil, wie unten gezeigt

Jeder sollte die Antwort kennen, ja! Der Linktext auf beiden Seiten wird rot, wenn wir auf die Juejin-Seite klicken. Wenn wir erneut auf Github klicken, verwendet der Browser diesen Stil wieder, sodass die Farbe des Links a werden alle rot, da es sich bei Vue um eine Einzelseitenanwendung handelt, sodass die Stile jeder von uns geöffneten Seite in globale Stile eingefügt werden. Die Lösung besteht darin, zu diesem Zeitpunkt eine andere Farbe hinzuzufügen. Öffnen wir die Seite, um als Nächstes ein Tag zu sehen (Bild unten).

Zu diesem Zeitpunkt hat das Tag a zusätzliche Daten-v-xxxxxxx. Daran wird uns Vue beim Erstellen erinnern Dieses Projekt In Komponenteneinheiten werden alle Elemente unter verschiedenen Komponenten mit etwas Ähnlichem zur Komponenten-ID hinzugefügt. Gleichzeitig wird dieser eindeutige Bezeichner in den von uns geschriebenen Stil in Form eines Attributselektors eingefügt it (Bild unten) )

Ja, nachdem wir den Bereich hinzugefügt haben, fügt Vue dieses Attribut dem letzten Absatz dieses Stils hinzu und wählt dieses Element dann über die Attributauswahl aus, um die Isolierung der Elementstile zu erreichen. Lassen Sie uns als nächstes zusammenarbeiten Werfen wir einen Blick auf die Nebenwirkungen von Scoped

Die Nebenwirkungen von Scoped

Zu diesem Zeitpunkt stellen wir element-ui vor, um die Nebenwirkungen von Scoped zu überprüfen. Hier wird auch „scoped“ verwendet

Beachten Sie, dass das Eingabeelement hier ist. Es gibt keine eindeutige Kennung wie data-v-xxxxxx

Aber wie sieht der Stil aus, den wir selbst geschrieben haben (my-Txt-Eingabe), nachdem er erstellt wurde? ? (Bild unten)

Wie im Bild oben gezeigt, wurde der von uns selbst geschriebene Stil mit dieser eindeutigen Kennung gespleißt, sodass wir dieses Element unabhängig von unserer Vorgehensweise nicht treffen können, was bedeutet, dass Vue dies nicht getan hat Angesichts dieser Eingabe fügen Sie dieses Logo hinzu, aber fügen Sie dieses Logo zu unserem Stil hinzu. Wenn wir jedoch den Gültigkeitsbereich entfernen, können wir das Ziel erreichen, aber wir empfehlen dies nicht. Der Stil wird in einen einheitlichen Stil verpackt. Dies ist ein Nebeneffekt von Scoped, also wie lösen wir es? Stildurchdringung

<style>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>

Wir können sehen, dass dieser eindeutige Bezeichner vom Ende der Eingabe bis zum Ende von my-Txt verläuft. Das bedeutet, dass Vue diesen eindeutigen Bezeichner immer in den letzten Absatz von einfügt, wenn wir this::v-deep nicht hinzufügen Wir schreiben den Stil. Wenn wir die Position dieses eindeutigen Bezeichners ändern möchten, müssen Sie ihn mit der Stildurchdringung angeben. Das obige Bild bedeutet, dass das my-Txt-Element diesen eindeutigen Bezeichner verwendet und in seine untergeordneten Elemente eingibt wird diesen Stil anwenden, und der von uns geschriebene my-Txt hat auch diese eindeutige Kennung, wie Sie auf dem Bild oben sehen können.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial】

Das obige ist der detaillierte Inhalt vonEinfache Analyse der Rolle der Vue-Komponente im Geltungsbereich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!