Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen
|
Was sind Slots? Die Slot-Direktive ist v-slot, die derzeit Slot und Slot-Scope, Slot-Inhalt, Vue-Instanz, eine Reihe von APIs zur Inhaltsverteilung ersetzt und das Slot-Element als Ausgang zum Übertragen verteilter Inhalte verwendet. Slots werden in einzelne Slots, benannte Slots und Scoped Slots unterteilt. Die ersten beiden sind relativ einfach und werden hier nicht besprochen. Heute konzentrieren wir uns auf die Scoped Slots. Hier werde ich den Kompilierungsumfang und den Slotumfang von VUE vorstellen. Werfen wir einen Blick darauf! Wenn es viele Komponenten gibt und Sie Variablen in einer Komponente verwenden, wird der Gültigkeitsbereich Ihrer Variable tatsächlich im Code gefunden, in dem sie definiert ist. Wenn sie nicht gefunden wird, wird ein Fehler gemeldet. [Das ist sehr einfach und jeder kann es sehen] Offiziell wird alles in der Vorlage der übergeordneten Komponente im übergeordneten Bereich kompiliert; alles in der Vorlage der untergeordneten Komponente wird im untergeordneten Bereich kompiliert. Das folgende Beispiel veranschaulicht dies perfekt:
Bereichsbezogene Slots sind schwer zu verstehen, daher müssen Sie sie sorgfältig verstehen: Lassen Sie mich nun über die Softwareanforderungen sprechen: In der Unterkomponente befindet sich ein Datensatz: z. B.: pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']. Ich möchte, dass er sich im Slot der Unterkomponente befindet, einige mit einer Listenanzeige, einige mit einem - Link und einige mit einem * Link. Sehen wir uns zunächst den Quellcode an (Slots werden nicht verwendet, er ist fest codiert und in diesem Code wurde er umgeschrieben, um den Slot-Bereich zu verwenden): Quelltext:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Warenkorb</title>
<script src="js/vue.js"></script>
</Kopf>
<Text>
<!-- Die Vorlage unterhalb des ungenutzten Steckplatzes ist fest codiert -->
<Vorlagen-ID="cpn">
<div>
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</div>
</Vorlage>
<div id="app">
<cpn></cpn>
</div>
<Skript>
const app = new Vue({
el: "#app",
Komponenten:
'cpn': {
Vorlage: "#cpn",
Daten() {
zurückkehren {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
}
}
}
}
})
</Skript>
</body>
</html>Wenn Sie also Slots verwenden:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Warenkorb</title>
<script src="js/vue.js"></script>
</Kopf>
<Text>
<!-- Es werden Slots verwendet und die Standardwerte der Slots sind unten festgelegt -->
<Vorlagen-ID="cpn">
<div>
<slot> <!-- Geändert -->
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</Vorlage>
<div id="app">
<cpn></cpn> <!-- Standardmäßiges Wertelistenformat verwenden -->
<cpn> <!-- GEÄNDERT -->
<!-- Das Problem liegt hier. Ich möchte die Daten in den Daten der CPN-Komponente in Form eines Links anzeigen, aber ich bekomme es nicht hin.
Aufgrund des Umfangs ist der Umfang hier die Vue-Instanz-App! Es können nur die Daten der Vue-Instanz-App abgerufen werden!
Der folgende Code ist also falsch! ! ! Wie lösen wir also das Problem, dass Slot-Code Daten von untergeordneten Komponenten erhält?
-->
<span v-for="item in pLanguages">{{item + "-"}}</span>
</cpn>
</div>
<Skript>
const app = new Vue({
el: "#app",
Komponenten:
'cpn': {
Vorlage: "#cpn",
Daten() {
zurückkehren {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
}
}
}
}
})
</Skript>
</body>
</html>Der Code wird ausführlich erklärt und die Probleme sind markiert. Kurz gesagt: Da es nicht im Umfang der Unterkomponente liegt, wie lässt sich das Problem lösen, dass der Slot-Code Daten in der Unterkomponente erhält? Lösung: Slot-Scope-Slots verwenden Dies ist das Ende dieses Artikels über den Kompilierungsumfang und den Slotumfang von VUE. Weitere relevante Inhalte zu Vue-Scope-Slots finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: mysql-8.0.17-winx64 Bereitstellungsmethode
>>: Tutorial zur Installation von PHP auf CentOS über Yum
Artikel empfehlen
Detailliertes Tutorial zur Nginx-Installation
1. Kurze Einführung in Nginx Nginx ist ein kosten...
So implementieren Sie die Kommunikation zwischen übergeordneten und untergeordneten Komponenten mit Vue
Inhaltsverzeichnis 1. Beziehung zwischen übergeor...
Native JS-Implementierung der Slider-Intervallkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Zwei Methoden zum Deaktivieren von Formularsteuerelementen in HTML: schreibgeschützt und deaktiviert
Beim Erstellen von Webseiten verwenden wir häufig ...
Ein Artikel zum Lösen des Echarts-Kartenkarussell-Highlights
Inhaltsverzeichnis Vorwort Aufgabenliste tun Sie ...
So ändern Sie die Systemsprache von CentOS7 in vereinfachtes Chinesisch
veranschaulichen Bei einer Eigeninstallation des ...
So installieren Sie Nginx unter Win10
Da das Unternehmen mich bat, einen WebService-Ser...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
CSS-Overflow-Wrap – Verwendung neuer Eigenschaftswerte überall
1. Verstehen Sie zunächst das Overflow-Wrap-Attri...
Docker-Compose-Installation DB2-Datenbankbetrieb
Es ist mühsam, die db2-Datenbank direkt auf dem H...
Detaillierte Erläuterung der bidirektionalen Docker-Netzwerkverbindung
Docker-Netzwerk anzeigen Docker-Netzwerk ls [root...
Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten
Dieser Artikel veranschaulicht anhand von Beispie...
Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)
1. Inline-Referenz: Wird direkt auf dem Etikett v...
Eine kurze Erläuterung der MySQL-Benutzerberechtigungstabelle
MySQL erstellt bei der Installation automatisch e...
So erweitern Sie den Linux-Swap-Speicher
Swap-Speicher bedeutet hauptsächlich, dass das Sy...