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
So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen
1. Prüfen Sie, ob Port 80 belegt ist. Normalerwei...
Detaillierte Erklärung zur Verwendung von Vue+Element zum Implementieren des Tags oben auf der Seite
Inhaltsverzeichnis 1. Seiten-Rendering 2. Tags hi...
Lösung für den Fehler beim Aufrufen des Containers aufgrund vollen Docker-Speicherplatzes
Da das Problem ziemlich plötzlich auftrat und das...
Jenkins erstellt Docker-Images und überträgt sie in das Harbor-Warehouse.
Inhaltsverzeichnis Docker-Datei pom.xml Jenkins-K...
Tiefgreifendes Verständnis der verschiedenen Sperren von MySQL
Inhaltsverzeichnis Schlossübersicht Sperrklassifi...
So verhindern Sie die Weiterleitung von Hyperlinks mithilfe von JavaScript (mehrere Schreibweisen)
Durch JavaScript können wir das Springen von Hype...
TCP-Socket-SYN-Warteschlange und Accept-Warteschlangen-Unterschiedsanalyse
Zunächst müssen wir verstehen, dass ein TCP-Socke...
Nginx erstellt Implementierungscode für RTMP-Liveserver
1. Erstellen Sie ein neues RTMP-Verzeichnis im Ng...
jQuery realisiert dynamische Partikeleffekte
In diesem Artikel wird der spezifische Code von j...
Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken
Verwenden Sie CSS, um zu verhindern, dass Lightbo...
Singleton-Entwurfsmuster in JavaScript
Inhaltsverzeichnis 1. Was ist ein Entwurfsmuster?...
So legen Sie mit CSS eine Hintergrundunschärfe fest
Beim Erstellen einiger Seiten müssen wir häufig H...
CSS3 realisiert die Animation des Shuttle-Sternenhimmels
Ergebnis: html <canvas id="Sternenfeld&qu...
Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?
Inhaltsverzeichnis Überblick Definieren von Metho...
Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten
Inhaltsverzeichnis Problemanalyse Warum Kapselung...