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
Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern
Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...
Nginx erstellt Implementierungscode für RTMP-Liveserver
1. Erstellen Sie ein neues RTMP-Verzeichnis im Ng...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
Das Frontend erstellt und ändert CAD-Grafikdetails über JavaScript
Inhaltsverzeichnis 1. Aktuelle Situation 2. CAD-G...
Vue implementiert eine gleitende Navigation oben links und rechts
Navigation und andere Dinge werden bei der täglic...
Mehrere Möglichkeiten zum Aktualisieren von Batches in MySQL
Normalerweise verwenden wir die folgende SQL-Anwe...
Vue verwendet Split, um die universelle Drag-and-Slide-Partitionspanel-Komponente zu kapseln
Inhaltsverzeichnis Vorwort Start Grundlegendes La...
Beispielmethode zum Anzeigen von IP in Linux
Die Kenntnis der IP-Adresse eines Geräts ist wich...
Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz
<br />Vorheriger Artikel: Webdesign-Tutorial...
Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten
Inhaltsverzeichnis 1. So erhalten Sie unterschied...
Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)
1. Vorschau des Farbabstimmungseffekts Wie im GIF...
Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen
Auf Mobilgeräten sehe ich häufig kreisförmige Wel...
Detaillierte Einführung in TABLE-Tags (TAGS)
Grundlegende Syntax der Tabelle <table>...&l...
Implementierung des Zugriffs auf den gleitenden Überprüfungscode von Vue + DRF + Drittanbietern
Inhaltsverzeichnis 1. Hintergrund 2. Verifizierun...
Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
1. Einleitung Gilt es als Aufwärmen alter Themen,...